Question

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

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

Answer 1

在我的app shell入口点（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'那样使用其他地方的字体。

Answer 2

有两种方法，您可以通过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);

}

Answer 3

的index.html

<head>
  <link rel="stylesheet" href="css/style.css">
</head>

CSS / style.css文件

@import url('https://fonts.googleapis.com/css?family=Lato:300,400');

See this example for more details.

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

3 个答案: