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" />