快速上手制作Icon Font

2016-04-11 16:20:00

现在在提起Icon Font，已经不是什么新鲜的词汇了，网上已经有很多介绍它的文章，并且很多网站也已经将它用到，本篇主要是将制作Icon Font的整个流程整理一下，并且加入了自己在制作中遇到的问题，使得大家可以在今后使用的时候可以很快上手并且避免这些问题。

一、首先要说的是，什么是Icon Font。

我认为，我们现在通常所指的Icon Font，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

二、知道了什么是Icon Font之后，我们要了解它能干什么，大家是怎么用的

这是一淘网用到Icon Font的地方[br]

这是新浪微博微吧用到Icon Font的地方[br]

这里还有我们自己做的小浪人[br]

三、下面我们自然要看看Icon Font都有什么优缺点了，从而决定我们是否要使用它

首先它的体积要比图片小的多

[br]

不仅体积小，而且还具有更好的可维护性（因为是矢量，所以拉伸不变形；颜色可以自行更换，支持一些CSS3对文字的效果）

像这些图片完全可以用Icon Font制作[br]
[br]

并且还可以通过base64置于CSS内，从而不产生图片的http请求

当然，Icon Font也是有缺点的，由于是字体，所以只支持图片上是纯色的，多种颜色的就不支持了

[br]

虽然制作Icon Font自然而然要增加重构的成本，但是跟后期维护相比还是值得的

四、Icon Font的优点明显要大于缺点，并且有可以使用的空间，因此我们决定使用它之后，

就要学会怎么去制作Icon Font

在制作之前我们要知道需要什么工具，其实很简单，只需要FontCreator，PS这两个工具即可。

制作的过程，首先需要我们的设计师给出Icon的矢量图，我们需要在PS中将这个Icon图层栅格化，之后保存为png24，再在FontCreator中通过图片导入到字体中，进行大小的调整（下面会给出字体制作各个值的用处，本人觉得比较重要的就是离左右的宽度以及离baseline的距离，最好一类icon的布局的一样的，这样也方便对齐），最后通过在线工具将字体文件转换成我们需要的多种格式。

[br]

要在网页中显示，目前有两种方式，一种是直接在html中输入相应的Icon所代表的字体，好处是兼容所有浏览器，就是在更改Icon的时候需要下游的后端程序员同事协助更改。[br]

另一种方法是在CSS中通过after伪类添加，这样可以通过CSS直接控制Icon的类别，只是不是所有浏览器都兼容,但是我们必须考虑到IE6的用户。[br]

通过分析现在开发的流程以及项目，用第一种方法在html中直接输入是比较合适的。

当然了，我们输入的时候怎么去知道要输入的字符是我要输入的Icon呢？只需要通过查阅Unicode对照表，根据字体制作软件中的Unicode码进行对比即可。

我们制作Icon Font是为了自己之后使用的，因为一个方便管理并且使用的html组件页面是必不可少的，其中应该包括对Icon的描述、所对应的代码等等这些信息，目的就是在自己或者同事使用的时候可以很方便。