图标字体运用以及其优势与劣势

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题，有一种比较好的解决方案，就是图标字体化。

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

1、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。


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

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

除了以上优势之外，当然也有劣势

1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高

如何获取图标字体及使用

一般来说，有3种方法：

1、把字符直接写在HTML文件里；

这个方法是简单比较直观，见如下代码，用一个元素去包含一个字符“!”(或!)，然后给这个添加一个类。这个字母在选定的字体中被映射到一个特定的图标。

<a href=”javascript:;”><span cass=”icon”>!</span>赞</a><a href=”javascript:;”><span cass=”icon”>&#x0021;</span>赞</a>

为了显示效果，还需要编写样式类.Icon来决定此字符以哪种字体来显示，如下：

.icon {font-family: ‘ your-incofont -name ‘;}

2、使用css来生成内容；

它不直接在HTML文件里添加字符，而是用CSS来生成字符内容。代码如下

<a href=”javascript:;” class=”icon praise”>赞</a>

可以看出，添加了一个类名“praise”。神奇的事就发生在CSS中，跟上面一样，第一步先定义好字体，然后使用:before伪元素来产生字符图标，其中“before”表示字符出现在左边，“after”则出现在右边。

.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: “f00a”; }

3、用data-icon属性

还有一种跟上面相似方法是使用HTML5的“data-”属性。如：创建一个data-icon属性。aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，不是对所有的平台都奏效。

<a href=”javascript:;”><span aria-hidden=”true” data-icon=”!”></span>赞</a>

结合一些搭配使用的CSS属性，可以写成如下代码

[data-icon]:before {font-family: ‘ your-incofont-name’; content: attr(data-icon);speak:none;}

博客由本人参考文章编辑整理，查看更多文章，请点击进入个人博客！