如何让Google字体（Varela Round）在Polymer 1.1 web组件中工作？

问题：

<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
    - polymer.html
+ - webcomponentsjs   
    - webcomponents.js

在polymer 1.1环境中，我如何包含一个用于dom模块的外部字体（如google字体或font awesome）

我现在知道聚合物喜欢使用样式模块。我也知道 将字体预加载到html并将其导入我的 dom模块。但我还是不能让它工作

我的

组件的目标：

<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
    - polymer.html
+ - webcomponentsjs   
    - webcomponents.js

我的dom模块基本上给这些图像画了一个圆圈，下面有一个

，它已经设计好了样式。然后在flexbox结构下，根据有多少个圆来相应地布置它们

我尝试的（TLDR版本） 我将

rel=“import”

a

font.html

用于样式模块，然后用于我的

组件，但不能将字体用于样式（在使用sans serif时它可以工作），这意味着我选择正确。我还通过谷歌检查了它，谷歌字体样式表被加载到

组件页面中

我尝试的内容（细节）：

<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
    - polymer.html
+ - webcomponentsjs   
    - webcomponents.js

+circle-x.html
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

<dom-module id="circle-x">...</dom-module>

+排版-x.html
+varela-round.html
+鲍尔元件
+-聚合物
-polymer.html
+-webcomponentsjs
-webcomponents.js

在Polymer文件中，我注意到有一个名为roboto.html的文件，所以我制作了一个类似的文件

<!-- varela-round.html -->
<link rel="import" ref="https://fonts.googleapis.com/css?family=Varela+Round>

所以有三个问题

第一个问题是，您的字体没有被加载，因为它的
rel
错误。它不应该是
rel=“import”
它应该是
rel=“stylesheet”

而不是

--circle-x-font-base: {
  font-family: 'Varela Round'
}

但第三个问题是更疯狂，而不是你的错。看起来自定义属性垫片不会应用包含字符串“var”的值

将默默地失败，因为其中包含“Var”一词。尝试使用不包含单词“var”的其他字体名称，您将看到它已被应用。我为此打开了一个GitHub问题：
所以有三个问题

第一个问题是，您的字体没有被加载，因为它的
rel
错误。它不应该是
rel=“import”
它应该是
rel=“stylesheet”

而不是

--circle-x-font-base: {
  font-family: 'Varela Round'
}

但第三个问题是更疯狂，而不是你的错。看起来自定义属性垫片不会应用包含字符串“var”的值

将默默地失败，因为其中包含“Var”一词。尝试使用不包含单词“var”的其他字体名称，您将看到它已被应用。我为此打开了一个GitHub问题：
我不需要任何其他字体文件或排版文件。简单地说，要包含任何要使用的web字体，请将样式表放在
dom模块的文档顶部。就我而言

circle-x.html
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

<dom-module id="circle-x">...</dom-module>


...

然后在选择器
font系列中的样式标记中引用它：var（-circle-x-font，'Mallanna'）

我只是简单地更改了字体，正如罗布多森所说，现在不能使用。
我不需要任何其他字体文件或排版文件。简单地说，要包含任何要使用的web字体，请将样式表放在
dom模块的文档顶部。就我而言

circle-x.html
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

<dom-module id="circle-x">...</dom-module>


...

然后在选择器
font系列中的样式标记中引用它：var（-circle-x-font，'Mallanna'）

我只是简单地更改了字体，正如Robdoson所说，现在不能使用。
circle-x不应该有头标记，也不应该有webcomponentsjs的脚本标记（顺便说一句，您想使用webcomponentjs/webcomponents-lite.js，而不是webcomponents.js…但只能在index.html文件中使用）。尝试删除这些。我想我看到了问题（有两个），但字体系列也可能有错误。深入研究一下……circle-x不应该有头标记，也不应该有webcomponentsjs的脚本标记（顺便说一句，您希望使用webcomponentjs/webcomponents-lite.js，而不是webcomponents.js……但只能在index.html文件中使用）。尝试删除这些。我想我看到了问题（有两个），但字体系列也可能有错误。深入研究它…好了，它现在起作用了！就像你说的，只需在元素中包含完全来自google字体的样式表。好的，现在就可以了！正如您所说，只需在元素中包含完全来自google字体的样式表。
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

<dom-module id="circle-x">...</dom-module>