在 Shadow DOM 中使用图标字体

Question

在 Shadow DOM 中使用图标字体

font-faceweb-componentshadow-domicon-fontsocticons

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。）

- sluijs

影子 DOM 在 Chrome 中无法加载带有 @font-face 的字体。您还必须在影子 DOM 之外包含 CSS 声明。请参见：http://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/ - bucabay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aleksei Matiushkin · Accepted Answer

没有“推荐的方式”来使用图标字体，因为它们只是一堆CSS，而影子DOM旨在隐藏轻量级CSS。因此，您的请求与遮蔽的目的相矛盾。

常见的方法是构建用于显示与字体相关的图标的组件。实际上，每个自定义组件库都有自己的组件来显示字体图标。只需搜索 font-awesome polymer 或类似的内容。随机示例。

< p > 旁注： @font-face 不会渗透到阴影中。这是指令设置字体名称与文件之间的关系，以便从该文件中获取字体，对于浏览器尚不知道的字体。也就是说，无论您尝试声明什么：

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

然后像这样使用它：

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

在阴影中，它将无法解决。你的情况下它能被解决是因为浏览器知道从哪里获取字体来显示。一般来说，这与声明以下内容的情况相同：

font: Helvetica;

之前没有使用任何@font-face。

希望这可以帮到你。