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">

并创建了一个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

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

谢谢。

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

Answer 1

我会定义正确的方式来包含字体，就像Polymer Project一样：font-roboto

＆＃34;元素＆＃34;仅包含<style>标记。

对你而言，这看起来像这样（font-segment7.html）：

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

这适用于我的Firefox seven-segment-element。

注意： fontlibrary将segment7字体提供为.otf（OpenType），这在IE中仅部分支持。

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

1 个答案: