为什么要用和如何使用字体图标

发布于 Spy

11 年前

本文由Spy根据Steven Bradley的《Why And How To Use Icon Fonts》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.vanseodesign.com/web-design/icon-fonts/，以及作者相关信息

——作者：Steven Bradley

——译者：Spy

图片是有诸多优点的，然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”，因此，有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。

上一周我提出一个关于“在‘响应式设计’中图像处理的关键问题”的概述：尤其是如何为各种尺寸的设备提供相适应的的图片？而今天我会认真考虑一下“字符图标”，并且我们可以在我们的网页中使用“字符图标”来代替一些图片，达到一样的效果。

字符图标的优点

位图图片不能很好地进行缩放，当图片进行放大时会失真（即变模糊），当图片进行缩小时就会浪费掉像素。而且加载每一张图片都需要一次“http请求”，因此也拖慢了整个加载页面的时间。另外，要是没有图片编辑器（软件）的话就很难对图片进行编辑、处理等操作。

字体就不会有以上这些问题，字体可以进行随意缩放并且每一个字符都不需要进行额外的“http请求”。当我们把字体当成文字用来写作的时候，往往没有想到的是，它们只是一种形状而已。如果把这些字体看成图标，将又将会产生是怎样结果呢？

“‘字符图标’是非常美妙、神奇的”， Chris Coyier如是说。他制作关于“字符图标”的Demo页面就列出6大理由，为什么“字符图标”是如此美妙与神奇？

很容易任意地缩放；
很容易地改变颜色；
很容易地产生阴影；
可以拥有透明效果；
一般来说，有先进的浏览器支持；
可以使用CSS来装饰（可以得到CSS很好支持）；
可以快速转化形态（做出一些变化，如 :hover等）；
可以做出跟图片一样可以做的事情（改变透明度、旋转度，等）；
本身体积更小，但携带的信息并没有削减。

让我们来看位图做的效果

如何使用字符图标？

想要使用字符图标的第一步是去找到并且嵌入这些字体。我将会在文章的后面告诉你去一些地方寻到它们。当你有了字体，你就可以使用字体方法来使用它。我推荐这文章Paul Irish写的有关于@font-face语法。

有关于@font-face更多的中文教程，在W3cplus已有多篇教程，如果您对此非常感谢兴趣，猛击这里。 ——大漠

一般来说，这里有3种方法：

把字符直接写在html文件里；
使用css来生成内容；
用data-icon属性

把字符直接写在html文件里

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

<a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>

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

.icon {font-family: 'your-chosen-icon-font';}

这是个简单的例子，但是通常你用字母当作为字符的时候，携带的信息量是较少的。字母是可以被屏幕阅读器读取到的，往往有时候你只是想仅作为图片被看到而已，会有那么一群人（如视障人士）是需要听内容的。

使用css来生成内容

让我们更深入点，不直接在html文件里添加字符，我们用css来生成字符内容。见代码如下：

<a href="shopping-cart.php" class="icon cart"> View Cart</a>

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

.icon { font-family: 'your-chosen-icon-font';}  .cart:before {content: "s"; }

同样是需要使用字母s来映射出图标，只不过区别是移除了HTML标签换用了CSS样式实现。这是好事，但是，屏幕阅读器还是会读出字母的，这样子也不是很好。

用“data-icon”属性

一个跟上面相似方法就是使用html5的“data-”属性，接下来我们就创建一个data-icon属性。

<a href="shopping-cart.php" class="icon" data-icon="s"> View Cart</a>

跟上面一样，我们也将添加需要的字体font-family，然后我们通过使用data-icon来创建字母（字符），如：

.icon {font-family: 'your-chosen-icon-font';} .icon:before {content: attr(data-icon);}

但是这些写还是会出现跟上面一样的问题，屏幕阅读器还是会读出字母的。

更好的 Data-Icon 方法

尝试去优化上面提到的Data-Icon方法，Chris Coyier就给出两个方法，一种是用类似的图标代表某个字符；另外一种是就直接使用标准的图标图片。

这里就展示第一种的做法，我们给当前元素添加一个新的属性：aria-hidden，并赋值为“true”。

<a href="shopping-cart.php"><span aria-hidden="true" data-icon="s"></span>View Cart</a>

aria-hidden=”true”是为了防止被阅读器直接把字符读取出来，但是也不是对所有的平台都奏效。

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

[data-icon]:before {font-family: your-chosen-font; content: attr(data-icon);speak: none;}

最后一个 speak: none，其实具体作用不是很可靠的，写上这个只是为了以防万一，能够用上，就可以派上用场了。你还可以从Chris Coyier的一篇文章post describing both methods看到上面所有讲到的例子，可以学习到更多。

字符图标的缺点有哪些？

到目前为止，我们听到的都是字符图标的好处和优点。难道字符图标就没有任何缺点吗？那么，接下来正是要说说缺点，或者说不好之处。我们提过我们是不愿意让屏幕阅读器去读出我们的字符图标了，那就提一下其它的。

它们只能被渲染成单色或者css3的渐变色；
你使用限制是很大的，除非你想花时间去创作你自己的字符图标；
创作字符图标是很耗时间的。

第一条不是很大问题，因为你将不会哪里都使用它们，不过就是因为字符图标受颜色的限制这个根本性因素使得它不能广泛使用。

最后两条也不是很大问题，很多免费、优秀的字符图标不断地增多，因此可以利用的这些资源也是不断增多，所以不必要一定去原创属于自己的字符图标。

从上面讲的方法中，我们已经知道主要有两种方法来解决屏幕阅读器的问题：在html的元素使用aria-hidden属性和把内容写在CSS里面。还有一种可能更好的方式就是把图标映射到统一字符编码标准的字母。很多很多还没被编码的代码进行映射性编码可以当作图标使用的话，也就不会被屏幕阅读器读出来了。

哪里可以得到字符图标？

文章一开始就说会指导你去获得字符图标，现在就开始讲解。下面列出一系列的链接，但我也相信不只只有这么一些链接可以得到你满意的字符图标，而且将来会有更多的人去创造更多的图标。

如果你是个才华横溢，有能力去创建自己的字符图标的人，我肯定下面列出的工具网站会对你很有帮助的。

总结

字符图标并不是适合所有的场合，但是在某扮演图标这方面的确很优秀、突出。甚至有比图片更多的优点，不仅仅可以缩放自如，而且还很容易维护，可以通过多种不同的途径对它们进行操作。

的确，字符图标并不是完美的，也存在一些的缺点。上面提到的屏幕阅读器问题，也将在生产的厂家那里不断地改善中……

字符图标不能完全解决你的响应式图片的问题，但是如果它们充当这个的角色，它们是很出色的。

下一周我想去探究一下另外一种可以解决图片问题但是目前使用不是很广的方案，那就是“可伸缩向量图形”（SVG）,它被作为一种可能取代位图图片的图形技术。

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Spy

原名吴建杰，常用昵称“间谍”，现居广州。目前不断学习CSS3,HTML5等前沿技术，巩固js基础知识。在进行前端开发的过程中，追求HTML便签语义化，CSS的重用性，js封装等很多性能优化的操作，一切以用户体验为基础，不断地追求性能优化。希望与更多的同行朋友一起共勉：个人博客,新浪微薄。

如需转载，烦请注明出处：

英文原文：http://www.vanseodesign.com/web-design/icon-fonts/

中文译文：https://www.fedev.cn/css3/icon-fonts.html

Air Max 95 20th Anniversary