font-face - Shadow DOM 中的图标字体

Question

有没有推荐的方法让图标字体(如 FontAwesome/Octicons)渗入 Shadow DOM？

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

#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不会渗入阴影。这是设置 fontname 和获取该字体的文件之间关系的指令，对于浏览器还不知道的那些字体 .也就是说，您是否会尝试声明:

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

然后像这样使用它:

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

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

font: Helvetica;

没有任何 @font-face在之前。

希望这可以帮助。