把UI图里的小图标制作成icon font_html/css_WEB-ITnose

      一个交互比较多的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

       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个部份和已经显示出来左下角那个点的颜色不一致，于是把它们调成一样的。

      这里使用linkscape进行编辑，因为linkscape可以直接编辑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;}

     如果不需要支持ie8及以下，可以像上面的示例一样用一个before或者after的伪类，如果需要的话，就在html文件里面用实体代码吧，例如上面的菜单按钮是：

<span style="font-family:icommon">&#xe900;</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教程。

      最后再比较下大小，把上面第一张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 IE7 IE8 Firefox 3.5 Firefox 3.6 Chrome Safari Opera

仅支持 Embedded OpenType(.eot) 格式。

仅支持 Embedded OpenType(.eot) 格式。

仅支持 Embedded OpenType(.eot) 格式。

支持 TrueType、OpenType(.ttf, .otf) 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

支持 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