uniapp小程序字体真机失效解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp小程序字体真机失效解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先看看官网的介绍：

使用 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. 添加服务器的域名

还有一个重点，一定要设置跨域，否则小程序真机还是不会显示文章来源地址https://www.toymoban.com/news/detail-608245.html

// 真机上失败的返回头
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

到了这里，关于uniapp小程序字体真机失效解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！