您当前的位置: 站长圈 > 技术文章 > 移动开发 > 高手之路!图标字体化浅谈经验技巧

高手之路!图标字体化浅谈经验技巧

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


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


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


3、兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里
20140121115551919.png


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


如何获取图标字体及使用
要想获取图标字体,不外乎两种途径,其一找到付费网站购买,其二就是到免费网站下载,提供免费下载网站很多,神飞曾经发表过一篇博客icon font大搜罗,上面罗列好多的免费网站的地址,大家有兴趣可以去下载。如何使用呢?一般来说,有3种方法:

1、把字符直接写在HTML文件里;
这个方法是简单比较直观,见如下代码,用一个元素去包含一个字符“!”(或!),然后给这个添加一个类。这个字母在选定的字体中被映射到一个特定的图标。
复制代码
为了显示效果,还需要编写样式类.Icon来决定此字符以哪种字体来显示,如下:
  1. .icon {font-family: ‘ your-incofont -name ‘;}
复制代码

2、使用css来生成内容;
它不直接在HTML文件里添加字符,而是用CSS来生成字符内容。代码如下:
复制代码
可以看出,添加了一个类名“praise”。神奇的事就发生在CSS中,跟上面一样,第一步先定义好字体,然后使用:before伪元素来产生字符图标,其中“before”表示字符出现在左边,“after”则出现在右边。
  1. .icon {font-family:’ your-incofont-name’ ;}.praise:before {content: “f00a”; }
复制代码

3、用data-icon属性
还有一种跟上面相似方法是使用HTML5的“data-”属性。如:创建一个data-icon属性。
aria-hidden=”true”是为了防止被阅读器直接把字符读取出来,不是对所有的平台都奏效。
复制代码
结合一些搭配使用的CSS属性,可以写成如下代码:
  1. [data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}
复制代码


制作自已图标字体
以上是免费图标字体使用的几种方法,下面看看如何制作属于自己的图标字体。

1、首先需要有创建矢量图标的软件,并且能够输出SVG格式,比如“Illustrator”或者“Inkscape”。也可以用Photoshop的路径工具画出所需要的图标,然后导出路径到Illustrator里去填色。 下图为Adobe Illustrator软件。

20140124172631179.png


注意一定是封闭的路径,不能是单路径描边,如果是单路径的话生成字体图标后会显示不出来。两个以上的图形要合并、图形尽减少节点使用。如下图,中间的图(嘴巴部分)为单路径描边(不封闭),导入图标生成器后会如右图所示,嘴巴部分显示不出来。
20140121115556173.png