4

有没有推荐的方法让图标字体（例如 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。）

4

1 回答 1

6

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

常见的方法是构建用于显示字体相关图标的组件。每个自定义组件库实际上都有自己的组件来显示字体图标。只是谷歌font-awesome polymer或喜欢。一个随机的例子。

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

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

然后像这样使用它：

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

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

font: Helvetica;

之前没有任何@font-face。

希望这可以帮助。

于 2015-03-01T14:00:16.140 回答