评论

关于 wx.loadFontFace 加载字体在真机环境下不能正常显示的实验结果分享及正确解决方案

在项目中遇到了中文字体不能正确下载及显示的问题头疼了很久,决定自己实验测试一下在这里分享一下实验结果

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(跨域资源共享)
最后一次编辑于  2021-02-18  
点赞 5
收藏
评论

14 个评论

  • robin
    robin
    2021-12-02

    大佬牛逼,完美解决

    2021-12-02
    赞同
    回复
  • Zero&One
    Zero&One
    2021-11-21

    感谢分享, 以上说的安卓手机直接设置Access-Control-Allow-Origin: *就可以了, iOS 要设置Access-Control-Allow-Origin: servicewechat.com 才可以正常显示字体。

    不过我现在不能在canvas上正常显示字体,

    scopes: ['webview', 'native'],

    也设置了, 没用, 开发局工具和真机都无效

    2021-11-21
    赞同
    回复 1
    • tab
      tab
      2022-06-20
      不知道这个问题是否还存在,如果是在canvas中使用的话,最好在canvas所在页面onLoad时进行wx.loadFontFace
      2022-06-20
      回复
  • 浮生若梦
    浮生若梦
    2021-09-07

    请问这字体文件怎么设置Access-Control-Allow-Origin: *

    2021-09-07
    赞同
    回复
  • 杳无音信
    杳无音信
    2021-04-13

    参考已发布的小程序【字体秀】,它将 editor 组件和字体功能发挥得淋漓尽致

    2021-04-13
    赞同
    回复

正在加载...

登录 后发表内容