[微信小程序]字体文件，字体图标(.ttf,.woff,woff2)等无法显示问题
微信引入字体文件跨域问题
一. 背景
项目引用了第三方UI框架Vant-weapp，但是前几天Vant的cdn被运营商封禁，导致van-icon无法使用。
有赞官方在Github上给出了在小程序app.wxss上添加以下代码的临时解决方案:
1 @font-face { 2 font-weight: normal; 3 font-family: \'vant-icon-temp\'; 4 font-style: normal; 5 font-display: auto; 6 src: url(\'https://img.yzcdn.cn/vant/vant-icon-84f687.woff2\') format(\'woff2\'), 7 url(\'https://img.yzcdn.cn/vant/vant-icon-84f687.woff\') format(\'woff\'), 8 url(\'https://img.yzcdn.cn/vant/vant-icon-84f687.ttf\') format(\'truetype\'); 9 } 10 11 .van-icon { 12 font-family: \'vant-icon-temp\' !important; 13 }
我更新代码后，van-icon无法使用的问题解决了。
但是，终究是使用了第三方的cdn，存在cdn又挂了或者有赞停止维护的风险。
因此，决定将字体图标文件本地化部署(我这边项目要求不高，因为本小程序是给公司内部人员使用，如果是面向外界人员的，建议还是使用专业cdn服务)。
二. 尝试解决
解决方案： 使用上面vant官方提供的代码，把相应的ttf,woff,woff2文件下载下来放到本地服务器，替换相应cdn地址为我自己本地化后地址：
然后调试，无法正常显示，提示以下错误：
.woff2提示404，但是woff文件OK。把链接拿到浏览器上依然不行，怀疑是文件类型问题；
因为后端服务器是IIS的，检查一下,发现不支持.woff2格式文件，在MIME类型中加上：
再调试，不再提示错误，微信开发工具端正常显示。
真机调试，显示出现异常，原本图标的地方显示成了一个个×或空白。
查阅资料，怀疑是因为跨域的问题，因为我的小程序开发跨域的Origin有一个，又不能开放所有的origin，那么到底是哪一个origin，
尝试了一下加入https://weixin.qq.com，结果问题就解决了！万万没想到是微信跨域的问题。。。
至此，问题解决。
另外还有一种本地化的方式是把ttf,woff等字体文件转为base64放在小程序源文件中打包，但是我原本一个20k的ttf转base64后差不多60k，不能接受，所以还是使用了本地服务器部署网络化的方式。
1.
参考链接：
1. 字体文件跨域问题：https://blog.csdn.net/weixin_39015132/article/details/82657681
2. 字体文件base64后本地化： https://www.jianshu.com/p/3f7e7e559098