在聚合物元素中加载网络字体的正确方法是什么

Question

我创建了一个小聚合物元素来模拟 7 段显示，该元素需要加载字体 fontlibrary。org/face/segment7。

在哪里以及如何为元素加载它的正确方法？

起初，我输入：

<link rel="import" href="../polymer/polymer.html">
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/>

在元素中。这在 firefox 中不起作用（但它在 chrome 中）所以我搜索了更多并找到 www.polymer-project.org/1.0/docs/devguide/styling#style-modules 所以我修改元素以反映这一点并将我的代码修改为：

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="font-segment7.html">

并创建了一个字体-segment.html文件：

<dom-module id="font-segment7">
<link rel="stylesheet" type="text/css" media="screen" href="https://fontlibrary.org/face/segment7"/>
</dom-module>

结果是一样的，在 chrome 中工作，而不是在 firefox 中工作（没有错误并且下载了 font-segment.html 文件），所以，我想知道是否这种间接就是为此而设计的，我觉得它更适合共享风格而不是一次拍摄。

元素的演示在这里 https://potens1.gitlab.io/seven-segment-element/components/seven-segment-element/ and the code repository is there https://gitlab.com/potens1/seven-segment-element

这是使用 webcomponents（聚合物？）的方式，还是应该将字体嵌入到组件中？

谢谢。

PS：抱歉，post 链接

的信誉不足

Answer 1

我会像 Polymer Project 那样定义包含字体的正确方法：font-roboto

"element" 仅包含一个 <style> 标签。

对你来说，这看起来像这样 (font-segment7.html):

<link rel="stylesheet" href="https://fontlibrary.org/face/segment7"/>

这适用于我在 Firefox 中使用您的 seven-segment-element。

注意：字体库提供 segment7 字体为 .otf (OpenType)，在 IE 中仅部分支持。

在聚合物元素中加载网络字体的正确方法是什么

What is the correct way to load web font in a polymer element

javascript

polymer

polymer-1.0

webfonts

web-component