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

Question

问题：

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

I am aware now polymer favours using style-module. I'm also aware the technique to preload the font to an html and import that to my dom-module. But I still can't get it to work.

我的 <circle-x></circle-x> 组件的目标：

我的 dom-module 基本上为这些图像提供圆圈，并在其下方设置了 <h1> 样式。然后在flexbox结构下根据圈数响应式布局

我试过的（TLDR版本） 我将 rel="import" a font.html 用于样式模块，然后用于我的 <circle-x> 组件，但不能将字体用于样式（当我使用 sans-serif 时它有效），这意味着我选对了。我还 google-检查了它，google-字体样式表加载到 <circle-x> 组件页面中。

我试过的（详细）：

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

在 Polymer 文件中，我注意到有一个名为 roboto.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 字体制作了自己的版式-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 视频、文章和聚合物 site/documentation 但找不到解决方案。

我推特 @ebidel 他说我应该使用导入并给了我这个 link，但我觉得我做到了。 https://github.com/PolymerElements/font-roboto/blob/master/roboto.html

Answer 1

所以有三个问题。

首先是你的字体没有被加载，因为它有错误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 issue： https://github.com/Polymer/polymer/issues/2660

Answer 2

我不需要任何其他字体文件或排版文件。简单地说，要包含供 Polymer 使用的任何网络字体，请将样式表放在 dom-module 文档的顶部。就我而言，

圈子-x.html

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

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

然后在选择器的样式标签中引用它 font-family: var(--circle-x-font, 'Mallanna');

我只是换了个字体，像Robdoson说的，fonts start with VAR暂时不能用

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

How to get Google fonts (Varela Round) to work in Polymer 1.1 web component?

web-component

google-webfonts

polymer

polymer-1.0