说明
在小程序项目目录中,只有后缀名在白名单内的文件可以被上传,不在白名单列表内文件在开发工具能被访问到,但无法被上传。下载到本地的 iconfont 字体库文件(.ttf、.woff、.woff2)就不在白名单中,因此,微信小程序在本地时图标可以正常显示,上传后却不会显示。解决方案有以下两种:①直接使用阿里巴巴的网络路径;②将字体库文件转为base64格式。
小程序上传后缀名白名单参见:
https://developers./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
下载图标库
阿里巴巴矢量字体库地址: /
选择需要的字体添加到购物车。
在购物车内,下载代码。
解压文件
将字体库文件转换为base64格式
在 将字体库文件转化成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";
编写代码,上传后测试