微信小程序使用 iconfont

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