如何使用字体图标 iconfont
什么是 iconfont
iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。
为什么要使用 iconfont
在互联网刚起步的时候，较多使用的是png图片，但是png图片更换起来很麻烦， 并且自适应效果很差，有时候会出现锯齿以及马赛克模糊的情况，加载起来也较慢，影响用户体验。
iconfont 的产生就是来解决上面的问题，将 icon 做为字体来使用，它具有很多优势：
对 web 和 app：
-
弹性，在网页或者 app 上，展示字体是很便捷的。用 iconfont 可以很方便的改变 icon 的颜色，或者加入一些其他的效果。
-
可缩放，可以很方便的改变图标的大小。
-
矢量，iconfont 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊。
-
节省加载时间，iconfont 很小，每个小图标只有几 kb，大大节省了加载时间。
对设计师来说：
- 可以本地使用，这个是我最喜欢的功能，将 iconfont 安装到本地的系统上，然后就可以在Ps，Ai，Sketch这些设计软件里使用啦~
推荐的两个 iconfont 工具
那么对于设计师来说，要做 iconfont 需要怎么操作呢？
首先，需要一个转换设计稿的平台。
目前，国内用的最多的是阿里巴巴矢量库，优点是这是国内的中文网站，使用起来无语言障碍，缺点就是版权问题，因为上传上来的图标全部是做为公开库的，其他人可以进行浏览下载。以下是阿里巴巴矢量库的官方免责声明。
enter image description here
在此，推荐一个国外的网站，iconmoon 创建于2011年，其上有很多成熟的图标集，大多数都是精心制作，要收费的，可以看看拿来参考。主要还是要用它提供的制作 iconfont 的功能。
如何使用 iconmoon
第一步
将设计的 icon 导出成 svg 文件。我做了一个 icon 参考线的sketch文件，其中有64x64，32x32，24x24三个尺寸，以此来保证一套图标中 icon 大小的一致性。文末提供下载。
enter image description here
第二步
打开iconmoon网站，点击 import icons 按钮，选择刚刚导出的 svg 格式的 icon，要注意的是，图标不能直接使用描边，要用布尔运算做成填充样式的，要不上传的图标在缩放的时候会遇到问题。
enter image description here
第三步
点击右下角的 generate font，再点击 download
enter image description here
第四步
会得到一个zip的压缩包
enter image description here
解压出来，可以看到有demo，有字体文件，也有使用代码
enter image description here
把这个文件夹直接给开发就ok啦~
如何在本地使用 iconfont
那么，如何在本地使用 iconfont 呢？
第一步
像安装正常字体文件一样安装刚刚解压的文件夹里的 .ttf 文件
enter image description here
第二步
打开 demo.html 文件复制里面的图标代号到 sketch 里面，复制如下图绿色部分。
enter image description here
第三步
选择字体，可以看到图标就出现了，可以像处理文字一样的处理图标，改变它的大小和颜色。
enter image description here
