我对 StencilJS 也有同样的问题。
经过数小时的奋斗和@Intervalia 的回答，我得以解决它。
问题在于，当字体文件仅包含在 shadow dom（您的自定义 Web 组件）中时，浏览器不会加载它们。这意味着字体也必须包含在普通的 html 文件（也称为 light DOM）中，以便浏览器可以检测并加载它们，以便使它们在 shadow dom 中可用。
在我的例子中，我没有使用 Font awesome 而是一个自定义字体，但我第二次尝试使用 font awesome 和一个干净的 Stenciljs 项目。无论您需要哪种自定义字体，解决方案始终相同。
第 1 步：将字体移动到您的项目中。我在“src”文件夹中创建了一个单独的“assets”文件夹，以访问所有组件。在这个例子中，我为 web 环境下载了 font awesome https://fontawesome.com/download。 （我不推荐“npm install”，因为你也必须在 index.html 中使用它）
第 2 步：准备您的 Web 组件（在本例中为 my-component.tsx）。您可以使用 styleUrls 属性导入多个 css 文件。只需从您的资产目录中导入 fontawesome css。
import { Component, Prop, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrls: [
'my-component.css',
'../../assets/fontawesome/css/all.css'
],
shadow: true
})
export class MyComponent {
@Prop() first: string;
render() {
return <div> <i class="fas fa-question-circle"></i> </div>;
}
}
第 3 步准备要在其中使用组件的文件（在本例中为 index.html）。重要的一行是“链接”标签。这再次包括“font awesome css”并强制浏览器真正下载字体。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Stencil Component Starter</title>
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
</head>
<body>
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
</body>
</html>
我知道这感觉不对，看起来很奇怪，但仅在 index html 或 web 组件中包含 font awesome 是不够的。它必须真正包含在两个文件中。这并不意味着浏览器会多次加载它——它只会被加载一次。
这意味着您无法使用 Web 组件提供字体 - 据我所知。这不是 stenciljs 错误，这是浏览器的普遍问题。如果您有更好的解决方案，请告诉我。
只是为了好玩，这里是一个屏幕截图，显示当字体仅包含在一个文件中时浏览器不会加载字体。 http://prntscr.com/p2f9tc
2019 年 10 月 5 日更新：
如果你想在你的 web 组件中使用你的字体，上面的解释是正确的并且仍然是必要的。但是你也可以在 web-component 中使用 slot 标签。比您自动将字体从外部（html）绕过到网络组件中。但请注意，它仅适用于您在 Web 组件标签之间编写的内容。
这意味着您可以使用<my-component> <i class="your-font"/> </my-component>。在这种情况下，您不必将字体导入 Web 组件。