把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

       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">&#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教程。

      后来发现,其实不用这么麻烦,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

 

 

 

posted @ 2015-11-25 23:14  会编程的银猪  阅读(7355)  评论(1编辑  收藏  举报