1

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

索引.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 导入）。那里的自定义字体不起作用。有没有另一种方法来实现这一点。

4

3 回答 3

1

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

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

于 2021-03-05T19:13:29.400 回答
0

你必须在你的 Vue 应用程序中手动定义字体来完成这项工作。就像您在模板的 index.html 中所做的那样。

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

于 2019-12-19T14:15:37.167 回答
0

如果我将 @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>
于 2020-01-09T15:40:37.493 回答