关于 wx.loadFontFace 加载字体在真机环境下不能正常显示的实验结果分享及正确解决方案
发布于 3 年前 作者 wei29 4139 次浏览 来自 分享

wx.loadFontFace 必须满足的条件:

  • 跨域 / CORS

下载的字体文件的响应头中必须包含:Access-Control-Allow-Origin: *

这里指出一下,官方文档注意事项描述中的第3点这里有个问题(也可能是我理解错了,望指正):

官方写的是:“字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com”;

经过测试后发现如果将 Access-Control-Allow-Origin 设置为:“servicewechat.com” 的话在iOS设备中可以正确下载字体,但在安卓中不能下载,显示的是:“loadFontFace:fail”,

反复测试了一下如果将 Access-Control-Allow-Origin 设置为 * 在安卓真机环境下就可以下载成功并显示了。

  • 响应文件类型

Content-Type 必须设置为正确的字体类型,例如 *.ttf 对应的类型是 “font/ttf”

总结

  • 正确显示字体的必要条件就是:

Access-Control-Allow-Origin: *

Content-Type: font/ttf | font/woff | font/woff2 | …

*上面这两条配置需要后端在字体文件保存的服务器或者CDN设置

  • 为了让字体快速的加载,尽可能压缩字体文件大小或者精简字体,1mb内的字体大小基本可以在正常4G网络下实时加载出来;
  • wx.loadFontFace需要设置 global 属性,才能全局生效;
  • 下载字体文件的域名必须配置到小程序的 downloadFile 合法域名中;
  • 下载的字体文件域名需要使用HTTPS协议;

以上是个人实验下来的结果和一些经验,如果有不正确的地方可以评论指出。

参考

  1. 常见文件类型列表
  2. 跨域/CORS(跨域资源共享)
1 回复

很有帮助,十分感谢

回到顶部