base64
形式引入
首先我们点击 iconfont
项目中的 项目设置
按钮,位置如下图所示:
我们勾选图中所示三种字体格式,选择 base64
是为了将另外两种字体转为 base64
形式,而选择 woff
与 ttf
字体原因如下:
- TTF 兼容性更好,缺点是字体文件体积大;
- WOFF 与 TTF 字体相比体积小且表现性好;
- WOFF2 字体是对 WOFF 字体的升级,但兼容性欠佳。
微信的官方文档中也建议选择以上两种字体:
建议格式为 TTF 和 WOFF,WOFF2 在低版本的 iOS 上会不兼容。
我们再次下载设置后的字体图标文件,并将 iconfont.css
重命名为 iconfont.wxss
,因为下载的文件已将字体转为 base64
格式放入到 iconfont.wxss
中,所以我们只需要将 iconfont.wxss
文件复制到项目中即可,如下图所示:
虽然 base64
形式会增加约 1/3 的体积,但在少量图标的情况下,我更推荐这种方式引入,增加新图标时也只需要替换该文件即可,且由于会编译到小程序包文件中,不会出现外链形式在弱网或加载失败时图标显示为方框(所有字体找不到对应字符编码文件时都会显示成这样)的问题。
2. 代码示例
字体图标使用很简单,代码如下:
<text class="iconfont icon-xxx" />