uniapp字体ttf在小程序报错，解决方法

文章目录

导文
解决方法1：把字体改成base64格式
解决方法2：改成线上模式

导文

报错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 ()

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格式

当有一个字体文件（如 .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 数据。

示例：

css 复制代码

@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。但是，如果此代码在运行时报错，可能是由以下几个原因造成的：

示例代码

以下是一个更新后的示例代码，它包括了错误处理的改进：

js 复制代码

	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)
				}
			})

css 复制代码

	.body-num-text {
		font-family: 'BoldFont', MyCustomFont, sans-serif; /* 添加默认字体作为备选 */  
	}

您好，我是肥晨。

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。