如何让 Google 字体（Varela Round）在 Polymer 1.1 Web 组件中工作？
Rex*_*Rex 0 web-component google-webfonts polymer polymer-1.0
题：
在聚合物 1.1 上下文中，我如何包含用于我的 dom 模块的外部字体（如 google 字体或 font-awesome）？
我知道现在聚合物倾向于使用样式模块。我也知道将字体预加载到 html 并将其导入我的 dom 模块的技术。但我仍然无法让它工作。
我的<circle-x></circle-x>组件的目标：
我的 dom 模块基本上为这些图像提供了圆圈，其<h1>下方已经设置了样式。然后在 flexbox 结构下根据有多少圆圈来响应式地布局它们。
我尝试过的（TLDR 版本）
我使用rel="import"了font.html样式模块，然后使用了我的<circle-x>组件，但不能使用样式字体（当我使用 sans-serif 时它有效），这意味着我选择了它。我还对它进行了谷歌检查，并在<circle-x>组件页面中加载了 google-font 样式表。
我试过的（细节）：
<!-- File structure -->
+ circle-x.html
+ typography-x.html
+ varela-round.html
+ bower-components
+ - polymer
- polymer.html
+ - webcomponentsjs
- webcomponents.js
在 Polymer 文件中，我注意到有一个名为 robots.html 的文件，因此我创建了一个类似的文件。
<!-- varela-round.html -->
<link rel="import" ref="https://fonts.googleapis.com/css?family=Varela+Round>
然后是 Typography.html 来引用 roberto.html
<!-- typography.html -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../font-roboto/roboto.html">
<style is="custom-style">
:root {
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
}
我为我的 Varela Round 字体制作了自己的 Typography-x.html 版本：
<!-- typography-x.html -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="varela-round.html">
<style is="custom-style">
:root {
--circle-x-font-base: {
font-family: 'Varela Round';
};
}
</style>
现在在我自己的名为 circle-x.html 的模块中，我尝试使用该字体，但没有成功。
<head>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="typography-x.html">
</head>
<dom-module id="circle-x">
<template>
<style is="custom-style">
.font{
font-family: var(--circle-x-font-base, sans-serif);
color: var(--circle-x-color, #353B39);
font-size: var(--circle-x-font-size, 2rem);
margin: 1rem auto 2rem;
}
.wrapper{
display: flex;
flex-wrap: wrap;
width: 200px;
margin: 20px;
height: 250px;
}
.img{
position: relative;
width:200px;
height:200px;
border-radius: 50%;
background-color: #E2E4E3;
box-shadow: 2px 2px 2px gray;
}
.img img{
width:100px;
height:100px;
}
.img:hover{
box-shadow: 5px 5px 5px gray;
cursor: pointer;
}
.placeholder{
position: absolute;
right:50px;
bottom:50px;
}
</style>
<div class="wrapper">
<a href="{{href}}" class="img">
<img class="placeholder" src="{{img}}">
</a>
<h2 class="font">{{text}}</h2>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "circle-x",
properties:{
img: {
type:String,
value:"http://www.placehold.it/100x100?text=IMG"
},
href: {
type:String,
value:"http://lightandlovehome.org"
},
text: {
type:String,
value: "test"
}
}
});
</script>
最终，我想为我的所有元素集设置 roberto 以外的默认字体，并在需要时使用 css 变量来更改它们。感谢阅读，我已经观看/阅读了大量 youtube 视频、文章和聚合物网站/文档，但找不到解决方案。
我在 Twitter 上@ebidel，他说我应该使用导入并给了我这个链接，但我觉得我做到了。https://github.com/PolymerElements/font-roboto/blob/master/roboto.html
所以存在三个问题。
首先是你的字体没有被加载，因为它有错误的rel. 它不应该是rel="import"它应该是rel="stylesheet"
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
第二个是您正在创建一个 mixin，但试图像常规自定义属性一样使用它。再次通读本指南：https : //www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
你想做：
--circle-x-font-base: 'Varela Round'
代替
--circle-x-font-base: {
font-family: 'Varela Round'
}
但第三个问题更疯狂，而不是你的错。看起来自定义属性 shim 不会应用其中包含字符串“var”的值。
--circle-x-font-base: Varela Round
会默默地失败，因为它里面有“Var”这个词。尝试一个不包含“var”这个词的不同字体名称，你会看到它被应用了。我为此打开了一个 GitHub 问题：https : //github.com/Polymer/polymer/issues/2660
| 归档时间： |
|
| 查看次数： |
2029 次 |
| 最近记录： |