如何使用 Polymer 将自定义字体导入应用程序或元素？答案

【问题标题】：How to import custom fonts into an app or element using Polymer?如何使用 Polymer 将自定义字体导入应用程序或元素？
【发布时间】：2017-11-21 21:35:08
【问题描述】：

如何将自定义字体导入 Polymer 应用或元素？

Polymer Slack Channel 上的每个 @tweightman：

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

<dom-module id="my-page-styles">
  <template>
    <style include="my-typography">
      :host {
        @apply --my-custom-font-mixin;
      }
    </style>
  </template>
</dom-module>

偶然发现了一个可能的解决方案：我似乎不得不在 my-typography.html 样式模块中使用 @font-face 规则，而不是使用 <link rel="stylesheet" href="my-font-face.css">。

【问题讨论】：

我正在尝试找到正确的实现来将新字体添加到聚合物应用程序并用作默认字体。你能详细说明一下你可能的解决方案吗？ my-typography.html 里面有什么？
@d.mares：我还没有解决方案。 But here is a public version of a relative of the referenced file。如果您想出答案，请添加答案。即使它至少不起作用，它也可能有助于产生一些想法。 github.com/PolymerElements/paper-styles/blob/master/…

标签： css polymer polymer-2.x

【解决方案1】：

有两种方法，您可以通过 html 文件或自定义元素文件加载字体。每个人都知道如何在 html 文件中执行此操作，只需将链接添加到头部并在样式中使用即可。

在自定义元素中，我们也以不同的方式做同样的事情。你可以使用构造函数 ready() 来实现同样的效果。

ready() {
super.ready();
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href =
  "https://fonts.googleapis.com/css?family=Megrim";
document.head.appendChild(link);

}

【讨论】：

【解决方案2】：

在我的应用程序外壳入口点 (index.html) 中，我有：

<custom-style>
    <style is="custom-style">
        @font-face {
            font-family: 'Space Mono', monospace;
            src: url(/fonts/SpaceMono-Regular.ttf) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        html {
            --primary-font-family: 'Space Mono', monospace;
        }
    </style>
</custom-style>

然后我就像在其他任何地方一样使用字体，var(--primary-font-family) 或 font-family: 'Space Mono'。

【讨论】：