不得不说的icon-font
[注：内容均摘录于etaoUX团队提供的相关资料]
先普及一下背景知识。icon-font，从字面上理解就可以看出，把图标和字体结合的一种技术。它主要应用于现在越来越多的跨平台设备中。其实它用到的是SVG矢量图形（为什么不用flash矢量，因为iOS不支持），其实很早就存在，只是设计同学没有怎么接触。而且ie9以下的浏览器都不能支持（ie害了整个中国互联网的进步）。
它的优势简单来看有两点：
1、无论你是什么分辨率，是否retina，无论你怎么放大（一定极限内），它可以保证图标不会出现任何模糊；
2、可以通过css直接控制图标大小、色彩甚至是投影和浮雕等效果；
3、一份字体文件可以存放很多图标，调用管理非常方便；
4、容量非常小，30个图标只有20k不到的文件大小；（因为它是矢量的）
目前，我所看到国内的主流网站，还是很少普及这个功能，so，那些买了苹果高清屏幕的同学，访问网站时是不是还是为那些毛边而感到痛苦。etao网在去年就已经推行了iconfont。如下图：
为什么要推行iconfont？最简单的一点就是在移动优先的多设备发展当下，分辨率越来越高，尺寸大小越来越不同，如果要为10个设备分别设计不同大小的图标，不仅设计成本很高，而且后期维护也好，用户访问也会有很大的障碍。
那怎么做icon-font？（以下完整内容摘录于阿里妈妈资深交互设计师桑行同学撰写的《矢量技术研究和实践》）
最后，对icon-font有兴趣的同学可以移步这里去看看etaoUX做得研究参考: 图形设计生成总结 ，或者详细阅读桑行同学撰写的《 矢量技术研究和实践》。1、在PS中用路径绘制
清晰:在PS中完成绘制,水平垂直避免半像素。
斜线,弧线保持饱满(PS中绘制是为了解决像素问题)。
大小:原则上以16px大小为图标标准大小(国际标准)。
重量:在实际设计中需要尽量保持图标重量的统一,这个标准是基于16px大小的基础上进行调整。
线条:线的宽度为2像素,必要时采用1像素也可。
间隔:图形间隔1像素
倒角:倒角以圆润为主,主要为两像素,不能出现半像素(部分没有规范的图标发现一个改一个)。
过度圆润:当一个图标所有的角都是倒角的时候,就有可能出现“过度圆润”现象,尽可能避免。
logo:logo类图标保持清晰为主,并不一定非要圆角。清晰标准仍然是16px
路径:路径确保封闭,为单一图层,能够全部复制。
2、在AI中中转
合并:把路径合并为单一图层。
上色:给路径着色,不用给边着色(不上色无法粘贴到字体)。
放大:因为字体文件已经设置了较高的清晰度,所以路径会需要比较大的比例。方法是:在ps中16px的图形 为基础,粘贴到AI后,选中路径对象,直接双击缩放,弹出缩放设置窗口,键入缩放 6260%。
AI的完整画布大小:1000px X 1000px (设置大画布是为了在字体中保持完整性)
闭合:确保路径闭合。
3、粘贴到FontLab
新建:新建一个空编码,双击灰色编码可以激活,右键重新更改名字为需要的编码,保持两个名字相同(以F 开头,往后排序,需要注意的是,编码是16进制的,也就是0-f,缝f进一位)。
粘贴:在AI中ctrl+c,在fontlab中ctrl+v粘贴,粘贴成功就可以预览中看到图形,失败则表示粘贴不成功或者 路径没有闭合。
对齐:对齐在清晰度中非常重要。在fontlab中,最小宽度为1000,图标超过时可以扩大(不扩大会导致字体 放大时候显示不完整),上下的位置是上限800,下限-200,超出不影响。快速对齐方法:在设计的时候,角 落中画一个矩形作为参考像素(对齐像素),和图形一起放大,在fontlab中作为对齐标准,对齐完后删除矩 形。
重新绘制:在字体中出现弯曲,变形等现象,应返回ai重新编译,减少多余控制点。仍然不行的话在ai放大图 形后粘贴到字体缩放。(这是因为字体的容差引起的,另一方法是更改字体容差,不过效果不显著。这也是图 标字体不适合过渡复杂的原因)
4、配置后交给前端
更新配置文件:在线下载最新的配置文件(https://ux.etao.com/uxiconfont.yml),添加新的图标位置,并且更改为相 应的代码。
换算16进制编码:随便打开chrome浏览器,右键审查元素,在弹出的选项卡中选中“console”,空白处填 入转换代码(chrome会记录操作,方向键向上可以唤出最新使用的转换代码)parseInt('0xf02a',16),把引号 内内容替换为16进制的代码,回车可以得到换算后的数值。
填写配置文件:uid,换算后的数值;code,16进制编码;name,图标名字;tags,标签,方便通过搜索寻 找;category,类型(1为类目,2为常用,3为后台,对号入座)
完成配置后交给前端
再附上桑行同学整理的图标字体制作注意事项：(该注意事项是根据一淘UX矢量制作模板为制作场景的说明)
