Question

我尝试在我的Polymer Chrome应用中使用本地字体。我试图在CSS中使用@ font-face。这就是我得到的：

@font-face {
    font-family: 'robotolight';
    src: url('../../assets/fonts/roboto-light-webfont.eot');
    src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
    url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
    url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
    url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'robotolight_italic';
    src: url('../../assets/fonts/roboto-lightitalic-webfont.eot');
    src: url('../../assets/fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
    url('../../assets/fonts/roboto-lightitalic-webfont.woff') format('woff'),
    url('../../assets/fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
    url('../../assets/fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

然后我在h1上使用这个font-face：

#CaseFiles-h1{   
    font-family: 'robotolight';
    //font-weight: normal;        <- no luck
    //font-style: normal;         <- no luck
}

不幸的是，字体没有加载，我得到一些默认的serif字体。

有什么想法吗？

我希望将字体保留为本地字体，而不是使用Google字体或类似字体。

Answer 1

您必须在Polymer对象之外缩小@font-face。然后你可以在聚合物模板中使用它。

<style media="screen">
    font-family: 'robotolight';
    src: url('../../assets/fonts/roboto-light-webfont.eot');
    src: url('../../assets/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('../../assets/fonts/roboto-light-webfont.woff2') format('woff2'),
    url('../../assets/fonts/roboto-light-webfont.woff') format('woff'),
    url('../../assets/fonts/roboto-light-webfont.ttf') format('truetype'),
    url('../../assets/fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
</style>
<dom-module id="polymer-element>
    <template>
        <span style="font-familiy: robotolight">Hello</span>
    </template>
</dom-module>

关于此事的博文是here。

Answer 2

查看Polymer的font-roboto linked definition。 font-size 在绝对度量中定义，如100,200等。定义 font-size：normal; 太粗鲁了。某些组件可能会请求绝对或相对测量的 font-size 。因此，尝试定义所有相应的字体大小以匹配所有可能的请求，即使您不包括所有字体类型（薄，轻，中等）。

另外，我认为你应该修复robotolight_italic定义：

@font-face {
  font-family: 'robotolight';
  /* ... */
  font-style: italic;
}

本地字体未在Polymer，Chrome App中加载

2 个答案: