stencil.js 组件的自定义字体

Question

我有一个模板组件，我想为其设置字体。我现在拥有的：

index.html

<body>
  <sidebar-component webpagename="dashboard"></sidebar-component>
</body>

<style>
  * {
    margin: 0;
    font-family: Lab_Grotesque_Light;
  }

  @font-face {
    font-family: 'Lab_Grotesque_Medium';
    src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
    font-weight: normal;
    font-style: normal;
  }
</style>

这会在我本地启动组件时设置字体。但我想在 Vue 应用程序中使用该组件（从 npm 导入）。自定义字体在那里不起作用。有没有另一种方法来实现这个。

Answer 1

您必须在 Vue 应用程序中手动定义字体才能使其正常工作。就像您在模板 index.html 中所做的那样。

如果你不想在你的 vue 应用程序中包含字体资源，你可以使用 https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files 将字体资源复制到你的 npm 包中。

Answer 2

如果我将@font-face{} 放在index-file 的header 中。它实际上适用于我使用模板组件的其他应用程序。

在index.html

<head>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "LabGrotesque-light";
      src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
    }
  </style>
</head>

Answer 3

现在文档中对此进行了介绍。您可以将字体保存到您的 src 文件夹并直接引用它。 https://stenciljs.com/docs/local-assets

更新：实际上似乎存在无法在 Shadow 中加载自定义字体的问题 DOM https://github.com/ionic-team/stencil/issues/2072

stencil.js 组件的自定义字体

Custom font for stencil.js component

fonts

vue.js

stenciljs

stencil-component