Shadow DOM 中的图标字体

Question

是否有推荐的方法让图标字体（例如 FontAwesome/Octicons）渗入 Shadow DOM？

目前，当我想在自定义元素的 Shadow DOM 中使用图标时，我必须在 Shadow DOM 中内联包含 ociticons.css 文件的部分内容：

#shadowroot
<style>
    .octicon, .mega-octicon {
      font: normal normal normal 16px/1 octicons;
      display: inline-block;
      text-decoration: none;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .mega-octicon { font-size: 32px; }
    .octicon-search:before { content: '\f02e'} /*  */
</style>
<button>
  <span class="mega-octicon octicon-search"></span>
</button>

（显然，@font-face 确实渗入了 Shadow DOM。）

Answer 1

不，没有“推荐的方式”来使用图标字体，因为它们只是一堆 css 和 shadow DOM 旨在隐藏轻 css。所以你的要求与阴影的目的相矛盾。

常用的方法是构建显示字体相关图标的组件。每个自定义组件库实际上都有自己的组件来显示字体图标。只需谷歌font-awesome polymer 或类似。一个random example。

---

旁注：@font-face不会渗入阴影。它是设置字体名称和要从中获取该字体的文件之间的关系的指令，对于那些浏览器尚不知道的字体。也就是说，您是否会尝试声明：

@font-face {
    font-family: my-octicons;
    src: url('octicons.otf');
}

然后像这样使用它：

font: normal normal normal 16px/1 my-octicons;

在阴影中，它不会被解决。在您的情况下解决它的原因是浏览器知道在哪里显示字体。一般来说，这与您声明的情况相同：

font: Helvetica;

之前没有任何@font-face。

希望这会有所帮助。