导文
报错1： uniapp 小程序报错：app.js错误: Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): RangeError: Maximum call stack size exceeded at String.match (<anonymous>) at updateDecl (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-urlrewrite\lib\urlrewrite.js:102:26) at D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:188:28 at D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:144:26 at AtRule.each (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:110:22) at AtRule.walk (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:143:21) at D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:146:32 at Root.each (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:110:22) at Root.walk (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:143:21) at Root.walkDecls (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-comment\node_modules\postcss\lib\container.js:186:25) at D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss-urlrewrite\lib\urlrewrite.js:112:52 at D:\HBuilderX\plugins\uniapp-cli\node_modules@dcloudio\vue-cli-plugin-uni\packages\postcss\index.js:168:7 at LazyResult.run (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:288:14) at LazyResult.asyncTick (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:212:26) at LazyResult.asyncTick (D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:225:14) at D:\HBuilderX\plugins\uniapp-cli\node_modules\postcss\lib\lazy-result.js:217:17 at D:\HBuilderX\p 报错二： uniapp报错：[渲染层网络层错误] Failed to load local font resource /static/fonts/Kingsoft_Cloud_Font.ttf-do-not-use-local-path-./common/main.wxss&2359&7 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) (env: Windows,mp,1.06.2402040; lib: 3.4.7)
解决方法1：把字体改成base64格式
推荐一个转码平台：
https://www.giftofspeed.com/base64-encoder
当有一个字体文件（如 .ttf、.woff 或 .woff2）的 base64 编码版本时，可以在 CSS 的 @font-face 规则中直接使用该 base64 编码，而不是通过 URL 链接到字体文件。这样做的好处是字体文件被嵌入到 CSS 文件中，减少了 HTTP 请求的数量，但缺点是 CSS 文件可能会变得非常大。
以下是如何在 CSS 中使用 base64 编码的字体：
- 首先，需要获取字体文件的 base64 编码版本。
- 将 base64 编码的字体数据插入到 CSS 文件的
@font-face规则中。需要使用url('data:font/woff2;base64,...')（或其他适当的 MIME 类型，如font/woff或application/x-font-ttf）来指定 base64 数据。
示例：
@font-face {
font-family: 'MyCustomFont';
src: url('data:font/woff2;base64,d09GMgABAAAAAGVUAAEAAAAABigAAAIYAAEACAAAAAgAAAAAIAAAAAEoAAAAJnB....') format('woff2'),
/* 你可能还需要包含其他格式的 base64 编码，如 woff 或 ttf，但为了简洁这里省略了 */
fallback: url('fonts/myfont.woff2') format('woff2'); /* 提供一个备选 URL 以防 base64 数据过大或不被支持 */
font-weight: normal;
font-style: normal;
}
注意：
d09GMgABAAAAAGVUAAEAAAAABigAAAIYAAEACAAAAAgAAAAAIAAAAAEoAAAAJnB....是假设的 base64 编码数据，你需要替换为实际的编码数据。fallback: url('fonts/myfont.woff2') format('woff2');是一个可选的备选方案，用于在 base64 数据过大或不被支持的情况下提供备选字体文件。这个属性不是标准的 CSS 属性，但它可以作为一个注释或用于未来可能的实现。- 由于 base64 编码的数据可能会非常长，因此建议只在必要时使用它，并考虑文件大小和加载性能的影响。
- 确保你的 CSS 文件压缩和缓存策略得当，以减少传输大小和提高加载速度。
解决方法2：改成线上模式
使用wx.loadFontFace加载字体，微信小程序提供了wx.loadFontFace API 来加载自定义字体。通过此API，可以指定字体名称、字体文件路径，并在加载成功后应用该字体。
在你的代码中，你已经尝试使用wx.loadFontFace来加载一个名为BoldFont的字体，字体文件位于https://www.zitixiazai.cn/static/upload/other/20220914/1663119174123134.ttf。但是，如果此代码在运行时报错，可能是由以下几个原因造成的：
示例代码 以下是一个更新后的示例代码，它包括了错误处理的改进：
wx.loadFontFace({
family: 'BoldFont',
source: 'url("https://***/static/upload/other/20220914/1663119174123134.ttf")',
success(res) {
console.log(res.status)
// self.setData({ loaded: true })
},
fail: function (res) {
console.log(res.status)
},
complete: function (res) {
console.log(res.status)
}
})
.body-num-text {
font-family: 'BoldFont', MyCustomFont, sans-serif; /* 添加默认字体作为备选 */
}
您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
