评论

关于 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 个评论

  • Norma1Person
    Norma1Person
    2023-05-24

    真机还是不行

    2023-05-24
    赞同 1
    回复 3
    • Ding~
      Ding~
      2023-07-05
      我的也是,真机不行
      2023-07-05
      回复
    • 世梦~天蝎
      世梦~天蝎
      2023-10-27
      我已经设置了Content-Type和Access-Control-Allow-Origin,为什么还是不行的。兄弟们解决了没有?
      2023-10-27
      回复
    • nobody
      nobody
      2023-11-09
      可以的,你设置一下字体的http头就行了,加上no-cache
      2023-11-09
      回复
  • choic
    choic
    2021-02-24

    很有帮助,十分感谢

    2021-02-24
    赞同 1
    回复
  • 在路上
    在路上
    10-30

    oss可以了,阿里云CND怎么设置不生效啊

    10-30
    赞同
    回复
  • 小灰灰
    小灰灰
    10-25

    location ~ .*\.(eot|otf|ttf|woff|woff2)$

        {

            add_header Access-Control-Allow-Origin *;

        }

    nginx上配置有效

    10-25
    赞同
    回复
  • 蓝色天空
    蓝色天空
    2023-11-15

    https://developers.weixin.qq.com/community/develop/article/doc/00026e4c334d38fadefb32ce35bc13 我是按照这个上面的方法就出来了,可以在ios和安卓都实现

    2023-11-15
    赞同
    回复
  • 讠豸
    讠豸
    2023-05-12

    我的字体文件是同源下的,所以不需要处理跨域,真机上还是不能生效

    2023-05-12
    赞同
    回复
  • TANGYC_
    TANGYC_
    2022-11-12

    特意登录点个赞


    2022-11-12
    赞同
    回复
  • 人民币收割机
    人民币收割机
    2022-11-09

    实测有效!

    2022-11-09
    赞同
    回复
  • 谌祖恒
    谌祖恒
    2022-10-22

    真机测试通过

    2022-10-22
    赞同
    回复
  • 谌祖恒
    谌祖恒
    2022-10-22

    2022-10-22
    赞同
    回复

正在加载...

登录 后发表内容