本地字体未在 Polymer、Chrome 应用程序中加载答案

【问题标题】：Local fonts not loading in a Polymer, Chrome App本地字体未在 Polymer、Chrome 应用程序中加载
【发布时间】：2015-02-12 18:50:46
【问题描述】：

我正在尝试为我的 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 上使用这个字体：

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

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

有什么想法吗？

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

【问题讨论】：

标签： css fonts polymer google-chrome-app

【解决方案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。

【讨论】：

【解决方案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;
}

【讨论】：