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或https://docs.npmjs.com/files/package.json#files的字体资产复制到npm包中。

Answer 2

如果我将@ font-face {}放在索引文件的标题中。它实际上是从我使用模板组件的其他应用程序中工作的。

在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组件的自定义字体

3 个答案: