把UI图里的小图标制作成icon font

一个交互比较多的UI图里面可能会有很多小图标，一般可用sprites图将多个小图标弄成一张大图，或者其它的办法，各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标，本文深入讨论使用icon-font的的制作方法：在PS里面导出svg，制作字体图标。这种方法既有sprites图不需要浏览器发多次请求的优点，也有使用clip-path/svg矢量无损的优点，并且支持IE6及以上。

使用sprites图可以自行用PS将多个小图标放至一张图：

sprites图的缺点是不是矢量的，在适配布局里，在伸缩时可能会失真。而使用icon fonts是矢量放大无损的。

接下来介绍制作icon fonts的方法。

1. 需要安装PS、AI

2. 下载一个PS的脚本：PSD to SVG，按照里面说明的办法，将脚本放到PS的脚本目录：Adobe Photoshop/presets/scripts，重启PS。

3. 将图层里面的icon形状图层复制到一个新文档，并将图层重命名为.svg后缀结尾。弄成svg结尾主要是为了脚本识别哪些图层要进行转换。注意图层命名最好用字母数字和下划线，不然可能会出问题。

4. 执行文件->脚本->PSD to SVG脚本，可能会提示没有保存文档，所以执行前先把新建的图层保存为一个文件。

6. 执行完脚本后会在psd所在的目录生成两个文件，一个svg和一个ai

7. 用AI打开生成的ai文件，发现只有左下角有一个点显示出来了，如下图左显示，当把鼠标放上去的时候发现那些path是存在的，只是没显示出来。

8. 所以在AI里面把它填充一下，把显示出来的部份填充成黑色，然后另存为svg：File->script->saveDocs as Svg

aaarticlea/png;base64,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" alt="" width="90" height="90" />

9. 接下来，借助icomoon，制作字体。打开icommon(如果打不开，得使用代理因为这网站使用了谷歌的一些服务)，点击右上角的Import Icon按钮，导入上面保存的svg文件。

icomoon就会跳到select页面，选中刚刚导入的图标：

再点击右下角的Generate Font:

跳到了生成好的icon页面，点击get code:

观察它的使用代码，发现这个图标被拆成了6个span表示6个path，还要调节它们的间距。这不是想要的结果，理想的结果应该是只要一个span表示这个图标就好了。

根据icomoon的给出的提示：

To avoid multicolor glyphs, reimport your SVG after changing all its colors to the same color.

发现是由于各个部份的颜色不一致导致的，上面设置没有显示出来的其它5个部份和已经显示出来左下角那个点的颜色不一致，于是把它们调成一样的。

这里使用Inkscape进行编辑，因为Inkscape可以直接编辑svg源代码，更加直观，打开用PS生成的还没改过的svg文件：

可以看到，之所以会没显示出来，是因为fill属性设置成了none，所以把它们都改成和左下角那个都一样的颜色：

保存后上传到icomoon，再点get code，生成的字体就是完整的一个实体了：

下载后打开，生成的字体文件放在了fonts目录下，同时icomoon提供了demo，使用时，通过一个@font-face导入字体文件：

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?3hb5tb');
    src:url('fonts/icomoon.eot?3hb5tb#iefix') format('embedded-opentype'),  /*为了支持低版本的IE*/
        url('fonts/icomoon.ttf?3hb5tb') format('truetype'),
        url('fonts/icomoon.woff?3hb5tb') format('woff'),
        url('fonts/icomoon.svg?3hb5tb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

或者在html文件里面用实体代码吧，例如上面的菜单按钮是：

<span style="font-family:icommon"></span>

当然也可以用icommon提供的大量免费的图标和搜索功能，但是使用这些图标的缺点是大小可能是不一致的，导致在UI里面原本相同大小的字体图标需要设置不同的的字体大小。而使用UI图制作的svg大小比例就会贴近UI图，无需设置多个font-size。

需要注意的是，如果以后还要再导入新的图标，需要在原先的基础上添加，icommon支持导入project，将上面的下载的包里面的selection.json导入即可。如果把之前的icon和新的icon再导入一次，会导致之前的icon的编码发生变化。

上面使用了用AI/linscape的方法修正PS导出的ai/svg文件，也可以直接用文本编辑器修改svg文件。

有的时候，可能需要手动调整下svg的结构，例如上面的搜索框，在PS里面设计师是画了两个圆和一条线，如下面所示：

<svg version="1.1" width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 外面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0z"/>
<!-- 里面的圆 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

如果两个圆的fill颜色都设置成一样的灰色的话，那么生成的文件是这样的：

里面那个圆的fill属性的作用导致放大镜中间被填充了，因此需要手动改一下，将两个圆放到同一个path，这样围起来的路径就是一个环：

<svg width="40.004px" height="40.004px" viewBox="0 0 40.004 40.004" style="enable-background:new 0 0 40.004 40.004;"
     xml:space="preserve">
<!-- 把两个圆放到一起形成一条封闭的路径，即一个环 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M19,0c10.493,0,19,8.507,19,19s-8.507,19-19,19S0,29.493,0,19
    S8.507,0,19,0
    M19,2c9.389,0,17,7.611,17,17s-7.611,17-17,17S2,28.389,2,19
    S9.611,2,19,2z"/>
<!-- 放大镜的手柄 -->
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#505050;" d="M32.691,31.287l7.022,7.022c0.388,0.388,0.388,1.017,0,1.404
    s-1.017,0.388-1.404,0l-7.022-7.022c-0.388-0.388-0.388-1.016,0-1.404C31.674,30.899,32.303,30.899,32.691,31.287z"/>
</svg>

生成的放大镜就正常了：

还有的图标可能是由多个图层组成的，这个时候需要分别生成svg，然后放到一起，用Inkscape或ai调下相对位置。这里需要点svg的知识，可以参考MDN上的svg教程。

后来发现，其实不用这么麻烦，PS有一个合并形状的功能，如果一个图标是两个图层的，可以先合并为一个形状，选中两个图层，然后右键“合并形状”：

合并完了之后，再合并形状组件，先选中左边工具栏矩形工具，再点上面的“合并组件”，这样就所有的路径都会合成一个path。然后再使用上面说的生成字体图标的方法。通过这样的处理就不会出现上面的问题了，基本上百试百灵，不管多复杂的图标都适用。

最后再比较下大小，把上面第一张sprites图里面的9个小图标都制作成icon fonts，生成的文件大小为：

最大的为6.6KB，小的为2.6KB，而上面生成的sprites图为7.1KB，用tinypng压缩后为3.0KB。可以看到，如果只有几个图标并且图标本身就比较小时，在文件大小上，icon-font比sprites图的优势并不明显。当图标增加到18个，即把上面的图标再导入一次，现制作的icon-fonts大小为：

18个icon-font的最大svg格式的为13kb，最小的为4.1KB，sprites图为6KB，考虑到svg格式的并不太会可能被浏览器下载， 如下图所示。所以在文件大小上，icon-fonts还是比sprites图有优势的，如果图标个数不多的话差别不大。如果图标需要展示得很大的话，icon fonts的优势就很明显了。

IE6	仅支持 Embedded OpenType(.eot) 格式。
IE7	仅支持 Embedded OpenType(.eot) 格式。
IE8	仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Safari	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

来自w3 help

使用sprites图的另外一个缺点是，在移动端低配置的设备，可能会给内存和CPU带来很大的压力，如果sprites图太大的话。而icon font的最大优点是矢量无损，缺点是只能支持单色的图标，因为它是一个普通的字体，还有在制作上稍麻烦。

参考：

1. 使用css3新属性clip-path制作小图标

2. icomoon，制作icon font的在线工具

3. PSD to SVG