Shadow DOM中的图标字体

Question

有没有推荐的方法让Icon Fonts(eq.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和阴影DOM旨在隐藏光css.因此,您的请求与阴影的目的相矛盾.

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

旁注: @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之前.

希望这可以帮助.