[微信小程序]字体文件,字体图标(.ttf,.woff,woff2)等无法显示问题 您所在的位置:网站首页 微信小程序icon图标下载安装不了怎么回事 [微信小程序]字体文件,字体图标(.ttf,.woff,woff2)等无法显示问题

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

2023-12-04 03:20| 来源: 网络整理| 查看: 265

一. 背景

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

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有