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

Question

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

@tweightman 在 Polymer Slack Channel 上:

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

Stumbled across a possible solution: instead of using @font-face rules inside my-typography.html style module, I seem to have to <link rel="stylesheet" href="my-font-face.css"> instead.

Answer 1

在我的应用程序 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' .