Question

Question:

In polymer 1.1 context, how do I include an external font (like the google font, or font-awesome) to be used for my dom-module?

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.

Goal of my <circle-x></circle-x> component:

My dom-module basically give circles to these images with a <h1> below it already styled. Then under the flexbox structure to lay them out responsively according to how many circles there are.

What I tried (TLDR version) I used rel="import" a font.html to a style-module then to my <circle-x> components, but can't use the font for style (it works when I used sans-serif), which means I selector it right. I also google-inspected it and the google-font stylesheet is loaded in the <circle-x> component page.

What I tried (Detail):

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

In the Polymer files, I noticed there's a file called the roboto.html, so I made a file similar to that.

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

Then there's typography.html to reference 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;
    };
}

And I made my own version of typography-x.html for my Varela Round font:

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

Now in my own module, called circle-x.html, I try to use the font, but with no luck.

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

Ultimately, I want to set a default font other than roberto for all my sets of elements, and use css variable to change them when I need to. Thanks for reading, I have watched/ read a lot of youtube videos, articles, and the polymer site/documentation but can't find a solution.

I Twitter @ebidel and he said I should use an import and gave me this link, but I felt I did. 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问题： https://github.com/Polymer/polymer/issues/2660

Answer 2

我不需要任何其他字体文件或排版文件。简单地说，要包含要使用的任何Web字体，请将样式表放在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目前无法使用。

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

2 个答案: