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协议;
以上是个人实验下来的结果和一些经验,如果有不正确的地方可以评论指出。
参考
真机还是不行
很有帮助,十分感谢
oss可以了,阿里云CND怎么设置不生效啊
location ~ .*\.(eot|otf|ttf|woff|woff2)$
{
add_header Access-Control-Allow-Origin *;
}
nginx上配置有效
https://developers.weixin.qq.com/community/develop/article/doc/00026e4c334d38fadefb32ce35bc13 我是按照这个上面的方法就出来了,可以在ios和安卓都实现
我的字体文件是同源下的,所以不需要处理跨域,真机上还是不能生效
特意登录点个赞
实测有效!
真机测试通过