在传统的Web项目开发过程中，为了优化项目规模，减少臃肿的图片资源，特别是碎片化的图标对服务器造成的压力。

为此，我们会优先使用一些矢量字体的图标文件，比如阿里巴巴提供的免费开源图标库，它的好处就是可以像使用字体一样渲染我们的图标，极其流畅。

同样的，我们在微信小程序的项目开发过程中不可避免的需要使用字体图标，毕竟微信小程序2M的代码包大小限制还是比较蛋疼的。

对此，在官方微信文章中也有优化说明：

1.精简代码，删除不必要的WXML结构和未使用的WXSS定义；

2.减少代码包中直接嵌入的资源文件数量；

3.压缩图像并使用适当的图像格式；

不过相比于第一种方法，我们应该从引入资源入手，毕竟图片等资源是成本的很大一部分。

所以这时候我们就需要解决如何将字体图标引入小程序的问题。

与传统Web项目中字体图标的使用相比，微信小程序中字体图标的使用存在一些区别。

那么，我们先来了解如何在微信小程序中使用字体图标。

第一步：

第2步：

将需要的图标添加到项目中（建议将图标添加到项目中，而不是直接下载，以方便后续的项目维护、迭代开发等），步骤如下图所示：

第三步：

在我发起的项目中，选择刚刚建立的项目，选择“下载到本地”，将整个项目文件下载下来备份。

第四步：

将刚刚下载的项目文件解压后，点击将.ttf文件上传到网站。

一定要打开格式开关，一定要打开格式开关，一定要打开格式开关，重要的事情说三遍！！！

转换成格式化文件之后，我们接下来将转换成功的文件下载到本地电脑，步骤如下图所示：

（注：由于微信小程序不支持处理ttf、woff、eot等文件，但是支持.txt，所以我们需要打开格式开关，将其转换为.txt。）

第五步：

此时下载步骤3、4中的压缩包；

解压后分别选择.ttf、.css两个文件；

打开之后如图选中红色区域的内容，复制到微信小程序根目录下的.wxss文件中（创建这个wxss文件或者其他wxss文件，标记为字体图标文件）；

然后，在app.wxss中导入.wxss文件。

最后就可以像传统的web项目一样在wxml中正常导入使用啦。

防范措施：

微信小程序不支持标签，所以需要使用 替换标签。

现在：