uniapp小程序字体真机失效解决方案

佐武

已于 2023-04-20 09:49:24 修改

阅读量4.8k

点赞数

分类专栏： uniapp 文章标签：小程序微信小程序微信

于 2023-04-19 16:02:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50587417/article/details/130246111

版权

uniapp 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了在微信小程序中使用uni.loadFontFace加载自定义字体时可能遇到的问题，包括必须使用HTTPS协议，字体文件需在同一源下或启用CORS，以及真机测试时的跨域设置。解决方案涉及修改Nginx配置以允许跨域，确保下载域名已添加到小程序的服务器域名设置，并注意字体文件的大小限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看看官网的介绍：

使用 uni.loadFontFace

引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用平台绝对路径）。
微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
工具里提示 Faild to load font可以忽略
nvue不支持。nvue使用 Weex 提供的 DOM.addRule 加载自定义字体，详见

uni.loadFontFace({
	family: 'kaiti',
	source: `url("https://域名/xxx-1.ttf")`,
	success:(res) => {
		console.log('success',res)
	},
	fail:(err) => {
		console.log('err',err)
	}
})

如上可得两个重点：

1. 必须是https协议

2. 必须是同源下的

首先，如果是同源错误的话，一般是不会返回信息的，解决：修改 nginx 配置

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
  add_header Access-Control-Allow-Origin *;
}

然后还有一种失效，调试模拟器上运行成功，但是真机上又报 loadFontFace:fail 错误，解决：

这种原因是因为当前字体的下载域名没有添加上去

字体文件大小需要注意，不能太大！！

1. https://mp.weixin.qq.com/
2. 开发管理
3. 服务器域名
4. downloadFile合法域名   downloadFile => (下载文件)
5. 添加服务器的域名

还有一个重点，一定要设置跨域，否则小程序真机还是不会显示

// 真机上失败的返回头
Cache-Control: private
Date: wed,19 Apr 2023 09:40:15 GMT
ETag: W/"1656049-1681895328751"
Expires: Thu, 1 Jan 1979 00:00:09 GMT
Server: Apache-Coyote/1.1



// 真机上可以成功返回头
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Cache-Control: private
Connection: keep-alive
Content-Length: 1656049
Content-Type: font/woff2
Date: wed,19 Apr 2023 09:42:27 GT
ETag: W/"1656049-1681895328751
Keep-Alive: timeout=69
Last-Modified: Wed,19 Apr 2023 99:08:48 GMT