如何在Polymer 2.x中加载自定义字体？网页字体加载问题求助

嘿，我来帮你搞定这个自定义字体加载的问题！结合你给出的@font-face代码，我整理了几个关键步骤和注意事项，帮你顺利在Polymer 2.x中用上自定义字体：

1. 确认字体文件路径是否正确 #

Polymer组件里的资源路径是相对于组件HTML文件所在位置的。比如你的组件放在src/my-components/目录下，字体文件在src/fonts/目录，那../fonts/rc.eot这种路径是正确的；如果字体和组件在同一目录，就要改成./fonts/或者直接fonts/。

如果不确定路径对不对，可以打开浏览器开发者工具（F12），切换到Network标签，刷新页面后看字体文件的请求状态——如果是404错误，那肯定是路径写错了，调整一下就行。

2. 正确放置@font-face样式 #

在Polymer 2.x里，有两种常用的方式添加字体样式：

方式一：直接在组件内部的<style>中定义 #

把@font-face写在组件的模板样式里，然后在:host选择器中指定默认字体，这样组件内的文本就会自动使用自定义字体：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="your-element">
  <template>
    <style>
      @font-face {
        font-family: 'RobotoCondensed';
        font-weight: 400;
        font-style: normal;
        src: url('../fonts/rc.eot');
        src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
             url('../fonts/rc.eot?#iefix') format('embedded-opentype'),
             url('../fonts/rc.woff2') format('woff2'),
             url('../fonts/rc.woff') format('woff'),
             url('../fonts/rc.ttf') format('truetype');
      }

      /* 给组件根元素设置默认字体 */
      :host {
        font-family: 'RobotoCondensed', sans-serif;
        display: block;
      }
    </style>
    <p>这段文本会使用RobotoCondensed字体显示</p>
  </template>
  <script>
    class YourElement extends Polymer.Element {
      static get is() { return 'your-element'; }
    }
    window.customElements.define(YourElement.is, YourElement);
  </script>
</dom-module>

方式二：全局共享字体样式（适合多个组件使用） #

如果多个组件都需要用这个字体，建议把字体样式抽成单独的共享样式文件，比如font-styles.html：

<dom-module id="font-styles">
  <template>
    <style>
      @font-face {
        font-family: 'RobotoCondensed';
        font-weight: 400;
        font-style: normal;
        src: url('../fonts/rc.eot');
        src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
             url('../fonts/rc.eot?#iefix') format('embedded-opentype'),
             url('../fonts/rc.woff2') format('woff2'),
             url('../fonts/rc.woff') format('woff'),
             url('../fonts/rc.ttf') format('truetype');
      }
    </style>
  </template>
</dom-module>

然后在需要使用字体的组件中导入这个文件，并指定字体：

<link rel="import" href="../font-styles.html">
<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="another-element">
  <template>
    <style>
      :host {
        font-family: 'RobotoCondensed', sans-serif;
      }
    </style>
    <p>我也用了自定义字体！</p>
  </template>
  <script>
    class AnotherElement extends Polymer.Element {
      static get is() { return 'another-element'; }
    }
    window.customElements.define(AnotherElement.is, AnotherElement);
  </script>
</dom-module>

3. 可选：调整本地字体优先级 #

你的代码里写了local('Roboto Condensed')，这会让浏览器优先使用用户系统中已安装的同名字体。如果你希望强制加载自己的字体文件，可以去掉这个local()声明，改成：

src: url('../fonts/rc.eot?#iefix') format('embedded-opentype'),
     url('../fonts/rc.woff2') format('woff2'),
     url('../fonts/rc.woff') format('woff'),
     url('../fonts/rc.ttf') format('truetype');

4. 验证加载状态 #

设置完成后，刷新页面，在开发者工具的Network标签里查看字体文件的请求状态：

• 如果状态是200，说明字体加载成功；
• 如果是404，检查路径是否正确；
• 如果是其他错误，可能是字体文件本身损坏，尝试重新替换字体文件。

内容的提问来源于stack exchange，提问作者batgerel.e