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

时间 2019-11-24

标签为何如何使用字体图标繁體版

原文原文链接

图片是有诸多优势的，然而目前在网站设计这行业面临各类各样的挑战。图片不但增长了总文件的大小，还增长了不少额外的"http请求"，这都会大大下降网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”，所以，有时候在“响应式设计”中须要使用图像的最好解决方案就是不去使用图片。们能够在咱们的网页中使用“字符图标”来代替一些图片，达到同样的效果。 php

字符图标的优势

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

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

很容易任意地缩放；
很容易地改变颜色；
很容易地产生阴影；
能够拥有透明效果；
通常来讲，有先进的浏览器支持；
可使用css来装饰（能够获得CSS很好支持）；
能够快速转化形态（作出一些变化，如 :hover等）；
能够作出跟图片同样能够作的事情（改变透明度、旋转度，等）；
自己体积更小，但携带的信息并无削减。

如何使用字符图标？

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

通常来讲，这里有3种方法： css3

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

把字符直接写在html文件里

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

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

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

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

这是个简单的例子，可是一般你用字母看成为字符的时候，携带的信息量是较少的。字母是能够被屏幕阅读器读取到的，每每有时候你只是想仅做为图片被看到而已，会有那么一群人（如视障人士）是须要听内容的。 web

使用css来生成内容

让咱们更深刻点，不直接在html文件里添加字符，咱们用css来生成字符内容。见代码以下：浏览器

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

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

.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）,它被做为一种可能取代位图图片的图形技术。