阴影中的图标字体 DOM

Question

是否有推荐的方法让图标字体（eq。FontAwesome/Octicons）渗入阴影 DOM？

目前，当我想在自定义元素的影子中使用图标时 DOM 我必须在影子 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 确实渗入了影子 DOM。）

Answer 1

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

通常的做法是构建用于显示与字体相关的图标的组件。每个自定义组件库实际上都有自己的组件来显示字体图标。只是 google 代表 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;

在shadow中，不会解析。它在您的案例中得到解决的原因是浏览器知道在哪里显示字体。一般来说，这与您声明的情况相同：

font: Helvetica;

之前没有任何@font-face。

希望对您有所帮助。

阴影中的图标字体 DOM

Icon Fonts in Shadow DOM

font-face

web-component

shadow-dom

icon-fonts

octicons