亲宝软件园·资讯

展开

[微信小程序]字体文件,字体图标(.ttf,.woff,woff2)等无法显示问题

RiocasTure 人气:0

一. 背景

项目引用了第三方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

 

加载全部内容

相关教程
猜你喜欢
用户评论