angular - 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文件指定了带有字体的自定义字体文件的 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

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

我还探索了这个线程的选项，我无法将资产外部化（因为它们来自一个包）并且用于 ttf 和 wof 文件的 url-loader 不起作用。

有没有人尝试过类似的东西？由单个 javascript 文件组成的 Web 组件如何包含在独立应用程序中显示的外部字体。

标签： angularweb-componentcustom-font

Answer 1

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

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

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

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

请求后更新更多详细信息：

我处理它的方式是在package.json文件内部、在构建脚本中以及在ng build我添加一些额外npm run的命令以将字体文件包含在捆绑的 js 中之前。

第一步是使用以下命令将包含字体的 woff 文件编码为 base64

base64 my-fonts.woff > base64-fonts.txt 

下一步是data:application/octet-stream;base64,在编码文本前面添加字符串。这可以使用sed命令完成。

在应用程序中应该存在一个.css链接到该.woff文件的文件（带有字体），如下所示：

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

最后一步是将 .css 文件中的 url 链接替换为base64-fonts.txt刚刚创建的文件的内容（保留引号，也使用 sed）。新的 css 文件现在包含内联编码字体，一旦构建应用程序，字体应该包含在捆绑文件中。

package.json 文件的一个小例子：

"build": "npm run fonts-encode && npm run fonts-edit && npm run replace-css && ng build my-app --prod --output-hashing=none",
"fonts-encode": "base64 my-fonts.woff > base64-fonts.txt",
"fonts-edit": "[sed_command] base64-fonts.txt",
"replace-css": "[sed_command] base64-fonts.txt font-face.css"