在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化。在微社区项目中,有很多小的Icon(图标),如分享、回复、赞、返回、话题、访问、箭头等,这些Icon(图标)一般都是纯色的。开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案、SVG矢量图等,都因为种种原因放弃掉了(如多套图标繁琐、Android 2.3不支持SVG格式等),为了解决以上问题,用到了图标字体, 通过查阅Icon Font相关技术博客和文章,并结合在项目中实际应用梳理出了图标字体化浅谈这篇文章,望对正在学习和使用的重构同学们有一个参考和帮助!文章内的内容参考了相关技术文章并加上自已的理解,错误在所难免,欢迎批评指正。下图为微社区用到的部分图标字体。


微社区


使用图标字体的优势和劣势

字体图标除了图像清晰度之外,比位图还有哪些优势呢?
1、轻量性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍图像)要小。一旦图标字体加载了,图标就会马上渲染出来,不需要下载一个图像。可以减少HTTP请求,还可以配合HTML5离线存储做性能优化。


20140122144036957.png


2、灵活性:图标字体可以用过font-size属性设置其任何大小,还可以加各种文字效果,包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话,必须得为每个不同大小和不同效果的图像输出一个不同文件。


20140124105629539.png


3、兼容性:网页字体支持所有现代浏览器,包括IE低版本。


20140121115551919.png


除了以上优势之外,当然也有劣势
1、图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用。
2、使用版权上有限制,有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。
3、创作自已的字体图标很费时间,重构人员后期维护的成本偏高。


最近在做移动端图标库,由于兼容性和不同移动设备分辨率不同,于是考虑使用字体图标来建立图标库,可以完美的解决上述问题。下面以阿里妈妈的iconfont为例来说明如何制作自己的图标字体。


阿里妈妈官方图标库: http://www.iconfont.cn/


在制作图标字体之前,我们首先需要通过ai制作规范的矢量图形,由于我们公司的UI设计师已经给出了psd源文件,我们可以选中psd中图形的路径:


QQ截图20150808095023.jpg 


接着通过 文件——导出——路径到 illustrator 


QQ截图20150808095040.jpg


这样,就可以生成一个ai文件 QQ截图20150808095300.jpg


我们通过ai打开这个文件如图所示:


QQ截图20150808095431.jpg



接着,我们需要用阿里给定的标准模板来保存文件,icon.zip


我们打开模板:


QQ截图20150808095659.jpg



删掉阿里默认图标,替换上自己制作的图标,然后保存成svg的格式:


QQ截图20150808095908.jpg



保存好之后,我们的准备工作就完成了,接着,我们去网站处理 登录网址 http://www.iconfont.cn


进入图标上传页面:


QQ截图20150808100047.jpg


接下来,你应该知道怎么做了。。。。


图标字体生成的方式有很多种,支持的网站也很多,你可以选择适合你的一种去建立自己的图标字体库,非常方便