微信小程序字体图标(.ttf,.woff,woff2)无法显示的问题

2,540 阅读1分钟

这是我参与11月更文挑战的第9天,活动详情查看:2021最后一次更文挑战

微信小程序字体图标(.ttf,.woff,woff2)无法显示的问题

原因: 我项目引用了外部CDN,但是CDN链接失效了,更换别的有效的CDN链接虽然可以解决问题,但可能还会失效。

解决方法:

1.将字体图标文件本地化部署,就是把相应的ttf,woff,woff2文件下载下来放到本地服务器,替换相应CDN链接地址为我自己服务器资源地址。

2.把ttf,woff,svg等字体文件转为base64放在微信小程序项目文件夹,但是图标过多的话会导致base64文件过大,可能会超出微信小程序限制的打包大小,导致项目无法上线,所以将字体图标文件放到自己的服务器上才是根本方法。

苹果手机不识别woff字体图标的问题,需要自己手动转换成base64编码格式的

还有就是我在测试项目时,发现富文本编辑器组件图标有时显示有时不显示,调试了好久也没发现问题,最后换了苹果和安卓手机做测试发现苹果手机对woff字体图标兼容性不好,需要手动转换成Base64格式的,原生小程序只对woff2作了Base64转换处理,其余没处理的均需要手动转换,下面是我的转换方法

转base64格式网址:

transfonter.org/

在这里插入图片描述

             注意Base64按钮默认是关闭的,一定到打开

在这里插入图片描述 在这里插入图片描述

stylesheet.css文件内容,复制到项目里的字体图标css文件里即可

在这里插入图片描述