说明
在小程序项目目录中,只有后缀名在白名单内的文件可以被上传,不在白名单列表内文件在开发工具能被访问到,但无法被上传。下载到本地的 iconfont 字体库文件(.ttf、.woff、.woff2)就不在白名单中,因此,微信小程序在本地时图标可以正常显示,上传后却不会显示。解决方案有以下两种:①直接使用阿里巴巴的网络路径;②将字体库文件转为base64格式。
小程序上传后缀名白名单参见:
https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html#%E5%85%81%E8%AE%B8%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6
下载图标库
阿里巴巴矢量字体库地址: http://www.iconfont.cn/
- 选择需要的字体添加到购物车。
- 在购物车内,下载代码。
- 解压文件
将字体库文件转换为base64格式
在 transfonter.org 将字体库文件转化成base64格式。
-
上传:找到TTF格式文件,上传到平台(Add fonts)
-
设置:打开Base64编码(Base64 encode),选择下载的格式(Formats)
-
转换(Convert)并下载(Download)压缩包
小程序中引入图标库
- 解压后将 stylesheet.css 中的 Base64 编码替换到图标库 iconfont.css 文件的url中。
- 将 iconfont.css 文件复制到项目中,后缀改为 .wxss 在app.wxss中用@import全局引入
@import "./common/iconfont.wxss";
- 编写代码,上传后测试