Angular web component bundle 外部自定义字体包
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
文件指定 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-loader 不起作用。
有没有人试过类似的东西?由单个 javascript 文件组成的 Web 组件如何包含在独立应用程序中显示的外部字体。
我终于设法解决了我的问题。
通过 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
文件(带有字体)link 到 .woff
文件,如下所示:
@font-face {
font-family: "my-fonts";
src:url('../fonts/my-fonts.woff') format('woff');
font-weight: normal;
font-style: normal;
}
最后一步是将 .css 文件中的 url link 替换为刚刚创建的 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"
我使用带有 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
我看到了像 this 这样的答案,但目标是一个可移植的组件,而且因为字体是外部的,所以我无法将它们移动到资产文件夹中,因为它们可能会随着时间的推移而改变。
我还探索了 this 线程中的选项,我无法将资产外部化(因为它们来自包)并且用于 ttf 和 wof 文件的 url-loader 不起作用。
有没有人试过类似的东西?由单个 javascript 文件组成的 Web 组件如何包含在独立应用程序中显示的外部字体。
我终于设法解决了我的问题。
通过 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
文件(带有字体)link 到 .woff
文件,如下所示:
@font-face {
font-family: "my-fonts";
src:url('../fonts/my-fonts.woff') format('woff');
font-weight: normal;
font-style: normal;
}
最后一步是将 .css 文件中的 url link 替换为刚刚创建的 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"