Angular Web组件包外部自定义字体包 [英] Angular web component bundle external custom fonts package
问题描述
我使用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文件，因此最终我只能看到图标的占位符./p>
我曾尝试在生成的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加载器不起作用.
有人尝试过类似的东西吗?由单个JavaScript文件组成的Web组件如何包含独立应用程序中显示的外部字体.
我终于设法解决了我的问题.
通过package.json并在构建之前，我将.woff文件(包含图标)编码为base64.然后创建一个新的fontface-copy.css，其中src url包括数据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"
I have created a web component using custom elements with Angular 8. Part of the component is to show some custom icons (developed and packaged as a different app). I have included the package of the custom icons in the package.json file of the component:
"dependencies": {
"@somelibrary/icons": "1.0.34"
}
I gets correctly installed in the node modules. In the angular.json file I include the css file in the styles:
"styles": [
"src/styles.css",
"node_modules/@somelibrary/icons/css/fontface.css"
],
Where the fontface.css file specifies the urls of the custom font files with font-face:
@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;
}
I then build the custom web component and concatenate all created js files into one, to be used as a standalone component.
cat dist/lib/runtime.js dist/lib/polyfills.js dist/lib/scripts.js dist/lib/main.js > dist/myComponent.js
The issue here is that when I use the final produced javascript file (include it in a simple index.html page), the tff and woff files are not included, so I end up just seeing the placeholder of the icon.
I have tried including the font files during the built myComponent.js file but as expected I get a syntax error.
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
I have seen answers like this but the goal is a portable component and also because the fonts are external I cannot move them to the assets folder as they may change over time.
I have also explored options from this thread, I cannot externalize assets (since they come from a package) and the url-loader used for ttf and wof files does not work.
Has anyone ever tried something similar? How can a web component composed of a single javascript file include external fonts that are shown in a standalone application.
I finally managed to solve my issue.
Through package.json and before build I encode the .woff file (containing the icons) to base64. Then create a new fontface-copy.css where the src url includes all data within a Data URI like this:
src:url(`data:application/octet-stream;base64,[encoded_output]`)
Finally include the newly created file in the main css file and after build the icons are bundled inside the javascript file.
Update with more details after request:
The way I handled it was inside package.json file, in the build script and before ng build I added some additional npm run commands to include the fonts file in the bundled js.
First step is to encode the woff file containing the fonts to base64 using the following command
base64 my-fonts.woff > base64-fonts.txt
Next step is to add the string data:application/octet-stream;base64, in front of the encoded text. This can be done using the sed command.
In the application there should exist a .css file (with font-face) that links to the .woff file like this:
@font-face {
font-family: "my-fonts";
src:url('../fonts/my-fonts.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Last step is to replace the url link inside the .css file with the contents of the base64-fonts.txt file just created (keeping the quotations, using sed as well). The new css file now includes inline the encoded fonts and once the application is built, the fonts should be included in the bundled file.
A small example of the package.json file:
"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"
这篇关于Angular Web组件包外部自定义字体包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
