javascript - 在 polymer 元素中加载网页字体的正确方法是什么

Question

我创建了一个小 polymer 元素来模仿 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 所以我修改了元素以反射(reflect)这一点并修改了我的代码至:

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

并创建了一个 font-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/代码存储库就在那里 https://gitlab.com/potens1/seven-segment-element

这是使用网络组件( polymer ？)的方式，还是应该将字体嵌入到组件中？

谢谢。

PS:抱歉，没有足够的声誉来发布链接

Answer 1

我将按照 Polymer Project 的方式定义包含字体的正确方法:font-roboto

“元素”仅包含 <style>标签。

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

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

这对我在 Firefox 中的 seven-segment-element 有效.

注意:字体库提供了 .otf ( OpenType ) 形式的segment7 字体，IE 仅部分支持该字体。