[微信小程序]字体文件，字体图标(.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