Angular Web组件捆绑包外部自定义字体包

Question

我已经使用Angular 8使用自定义元素创建了一个Web组件。该组件的一部分是显示一些自定义图标（已开发并打包为其他应用程序）。我已经在组件的package.json文件中包含了自定义图标的包：

"dependencies": {
     "@somelibrary/icons": "1.0.34"
}

我已正确安装在节点模块中。在angular.json文件中，我在样式中包含了css文件：

"styles": [
    "src/styles.css",
    "node_modules/@somelibrary/icons/css/fontface.css"
],

fontface.css文件在其中使用font-face指定自定义字体文件的url：

@font-face {
  font-family: "my-fonts";
  src:url('../fonts/my-fonts.woff2') format('woff2'),
    url('../fonts/my-fonts.woff') format('woff'),
    url('../fonts/my-fonts.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后我构建自定义Web组件并将所有创建的js文件连接为一个，以用作独立组件。

cat dist/lib/runtime.js dist/lib/polyfills.js dist/lib/scripts.js dist/lib/main.js > dist/myComponent.js

这里的问题是，当我使用最终生成的javascript文件（将其包含在简单的index.html页面中）时，不包括tff和woff文件，所以我最终只看到了图标的占位符。

我曾尝试在构建的myComponent.js文件中包括字体文件，但正如预期的那样，我收到语法错误。

cat dist/lib/runtime.js dist/lib/polyfills.js dist/lib/scripts.js dist/lib/main.js dist/lib/my-fonts.ttf> dist/myComponent.js

[我已经看到了像this这样的答案，但是目标是可移植的组件，并且因为字体是外部的，所以我无法将它们移动到资产文件夹，因为它们可能会随着时间而变化。

我还研究了this线程中的选项，我无法外部化资产（因为它们来自程序包），并且用于ttf和wof文件的url加载器不起作用。

有人曾经尝试过类似的方法吗？由单个javascript文件组成的网络组件如何包含独立的应用程序中显示的外部字体。

Answer 1

我终于设法解决了我的问题。

通过package.json，在构建之前，我将.woff文件（包含图标）编码为base64。然后创建一个新的fontface-copy.css，其中src url包括数据URI中的所有数据，如下所示：

src:url(`data:application/octet-stream;base64,[encoded_output])

最后将新创建的文件包含在主css文件中，并在构建后将图标捆绑在javascript文件中。

如果有人需要有关流程的更多详细信息，我们很乐意为您提供帮助。