stencil.js 组件的自定义字体答案

【问题标题】：Custom font for stencil.js componentstencil.js 组件的自定义字体
【发布时间】：2021-03-06 03:47:37
【问题描述】：

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

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

【问题讨论】：

所以你的问题是 web 组件在这个设置中有正确的字体，但当你在 vue 应用程序中使用字体时却没有？
好吧，当我在 localhost 中运行 stenciljs 组件时，它就可以工作了。但是然后，我将它上传到 NPM 并在 VUE 项目中使用它，字体将无法工作@ChristianMeyer

标签： vue.js fonts stenciljs stencil-component

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您必须在您的 Vue 应用程序中手动定义字体以使其工作。就像你在 stencil 的 index.html 中所做的那样。

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

【讨论】：

我的 Vue 项目中也有字体，但是 stenciljs 组件在添加到 vue 项目时不会有正确的字体。在 vue 应用程序中，我在 App.vue 中设置了字体。就像我在模具中做的一样。所以字体适用于应用程序中的所有内容，但不适用于 stenciljs 侧边栏。
您能分享一个指向您的存储库的链接吗？