IconFont技术的研究与应用

现状问题

设计师：为达到像素完美，需要为不同分辨率显示设备准备@1x、@2x、@3x的切片 

工程师：需要针对不同显示屏分辨率来调整优化排版；需要考虑多个分辨率版本的图片加载性能问题；设备版本碎片化带来的可访问性的问题

IconFont是什么

IconFont，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。借助 CSS 的 @font-face 嵌入到网页里，用以显示 Icon。如下图：

字体形式的 IconFont 已经能解决大部分现状问题，比如避免多尺寸切片等，但随着在使用过程中，发现显示图标存在一些缺陷：

1. 浏览器将其视为文字进行抗锯齿优化，有时得到的效果并没有想象中那么锐利。

2. IconFont 作为一种字体，Icon 显示的大小和位置可能要受到 CSS 属性的影响。CSS 样式可能对 Icon 的位置产生影响，调整起来不方便。

3. 使用上存在不便。加载一个包含数百图标的 IconFont，却只使用其中几个图标，非常浪费加载时间。 

4. 设计师制作 IconFont 以及把多个 IconFont 中用到的图标整合成一个 Font 也非常不方便。

在进一步的研究中发现现在主流的方法是使用 SVG 代替字体文件，优化为一种变形的 IconFont；SVG 是一种可缩放矢量图形，是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。本次研究的也是 SVG 转化为 IconFont 的使用。

SVG特点：

1. 分辨率无关：兼容现有图片能力的前提下还支持矢量，天生具有“分辨率无关”的特性，在任何分辨率下面，都可以做到完美缩放，不会像传统位图，如：png、jpg缩放后会有锯齿或模糊；

2. 文件小：正常 Icon 图标几百 kb，SVG 文件极小，如下图，相同清晰度图片，SVG 仅需 4KB；

3. 可读性好：由于 SVG 采用的是 XML 语法，图形的里面的文本内容可以直接被浏览器读取；

4. 支持 CSS 样式：和普通字体一样，你可以利用 CSS 来定义大小、颜色、阴影、hover 状态、透明度、渐变等等…

5. 兼容性：支持 ie9+，及现代浏览器；

适用场景：

扁平化或简洁风格，图标样式单一，颜色为纯色；

PC线上应用：

天猫、天猫超市、一号店，如下图所示：

APP线上应用：

蘑菇街

如何制作IconFont

IconFont 发展到目前为止，主要采用 SVG 格式的文件作为图形文字；在选择 SVG 制作工具时，对 Sketch、PS、Ai 分别进行了测试。

Ai 与 PS 都能较好支持 SVG 格式导出，但 Sketch 对 SVG 的导出支持的还不是很完善，Sketch 导出的 SVG 文件在 Ai 中打开也是有问题的，因此如果想要处理或者生成 SVG 的文件，目前 Ai 仍是较好的选择。

step1：

设定画布为 1024x1024px，依据 Material Design 规范参考线制作图标，保证整体视觉的统一性；

如上图所示，图标固定常规尺寸，周边为基础间距，一些特殊的图标也可以溢出，从实际的视觉统一性来考虑；

setp2：

检查图形规范，调整矢量图标需要注意点如上图所示（参考iconfont.cn）

step3：

另存为 SVG 文件，使用默认的 SVG 设置即可

在 Ai 中，选择 “Save As” 并选择格式为 “SVG”。

在 Sketch 中，先选中画板，点击右下角 “Make Exportable”，并选择格式为 “SVG”。

上文提到，Sketch 对 SVG 的支持不好，主要问题来自于我们需要的 SVG 文件，是没有fill属性，如果我们在 SVG 文件中设置了 fill 属性，就不能通过 CSS 来改变颜色；Ai 导出的 SVG 中 path 都是黑色（#000000）且不带 fill 属性，但sketch 导出的文件会带，需要自己手动删掉像 fill=“#000000” 这种属性。

导出 SVG 后，可以看出 SVG 文件仅占 3KB 内存；

IconFont的技术应用

SVG 文件生成后，需要对其进行应用，首先要转化为 SVG Sprite。目前主流的有三个在线网站，分别为 Iconfont.cn、Icomoon.io、Fontello.com。我们采用的是免费的在线工具 Iconfont.cn。由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广 Webfont 形式图标的平台。网站涵盖了 1000 多个常用图标并还在持续更新中，Iconfont 平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

拖动一个或多个 SVG 图标到 IconFont.cn 的上传表单，完成上传后会提示设置名称和 tag，点击「完成上传」开始生成IconFonts 。生成完成后，点击要下载的图标加入购物车，然后「下载至本地」。

解压下载的文件包，除了 EOT\SVG\TTF\WOFF 四种 web fonts 字体外，还有 demo.html 展示所有 Icons 及其对应的字体编码。之所以有4种字体格式，是考虑到不同浏览器不同平台对字体格式的支持不一样。

因为我们用的是 SVG 文件，采用的是 Sprite 技术，SVG Sprite 最佳实践是使用 symbol 元素；我们可以把 SVG 元素看成一个舞台，而 symbol 则是舞台上一个一个组装好的元件，这这些一个一个的元件就是我们即将使用的一个一个SVG 图标。

所以我们在下载文件需要使用的是 demo_symbol.html，引入生成的 symbol 代码：

加入通用 css 代码：

挑选相应图标并获取类名，应用于页面：

详情可参考《SVG Sprite技术介绍》

小结

IconFont 很好的解决了图形无损自适应的难题，设计师不再需要维护不同大小、不同颜色的多版本素材，图形矢量化之后，交给那些在线生成器就可以了。对于前端工程师，利用 HTML+CSS 就可以灵活的使用成百上千种图标，无需担心切图、定位、优化等传统位图要应付的情况。对用户而言，简洁、清晰的图标带给他们赏心悦目的感觉之外，浏览网站的速度体验也将大大提升。目前唯一的问题就是 SVG 的兼容成本，目前支持 ie9+ 浏览器（业界还有很多成熟的降级技术来解决）但是随着浏览器的发展，相信SVG一定会迎来自己的舞台！

参考资料：

《未来必热：SVG Sprite技术介绍》

《WEB设计新趋势：使用SVG代替Web IconFont》

《Google Material Design Guidelines》