uniapp小程序字体真机失效解决方案_uni 自定义字体不生效

首先看看官网的介绍：

使用 uni.loadFontFace

1. 引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代
2. 微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用平台绝对路径）。
3. 微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.com
4. 工具里提示 Faild to load font可以忽略
5. 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