CSS学习笔记----CSS3自定义字体图标

响应式网页字体图标

作者：大漠 日期：2014-01-28 点击：3220

@font-face

Responsive

本文由大漠根据Jason的《Responsive Webfont Icons》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webstandardssherpa.com/reviews/responsive-webfont-icons，以及作者相关信息

——作者：Jason

——译者：大漠

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面，不仅仅是针对于物理尺寸，而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下，都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites，并将其保存为.gif或.png文件。

然而，更糟糕的是图片根据响应式内容不断的放大，对于位图图像会产生锯齿，而且会越明显。更糟糕的是，CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

在固定尺寸之时，图标看起来很好，但放大，哪怕稍为放大一点点，边缘都会有锯齿，而且看起来模糊。

我想这也是很多设计师和开发人员尽量避免在设计中使用图标的原因，尽管在设计中使用图标在有限的空间中展示更好的想法，并且能达到令人意想不到的效果。

要创建响应式设计和可缩放的图标，我建议使用基于网页字体制作的矢量图标来替换位图图像。使用矢量图可以无限制的放大，而无需担心图像会失真。在本文中，我将向大家介绍网页字体制作图标来替换你设计中的位图图标，以提高可访问性，可扩展性，风格各异的图标。

为什么选择网页字体

网页字体的工作原理就像在你的文档中使用其他文件来创建的设计：你只需要将文件上传到你的服务器上，那么你的网页就可以下载这些文件，让他们能运行。但是，我们通常认为网页字体只是可读文件，它们用来显示我们设计中的图标的丁巴特(dingbat)字符。

技巧很简单，目前所有浏览器都支持。

使用网页字体制作图标具有以下三大优势：

-　易于渲染：网页字体图标可以用HTML文本的任何地方。为了屏幕阅读器能读到和易于搜索引擎，关键之处可以使用CSS制作图标替换文，向用户隐藏文本。 -　可扩展性：因为他们使用的是矢量，而不是位图渲染，图标可以缩小或放大，尽可能的放大也不会失真。这可以使你根据用户界面创造出更适合响应式设计中的图标。 -　易于美化：可以在重新设计图标的地方使用CSS，而不需要每次为了更新而重新创建图像。这也就是说，你可以使用CSS字体等样式来美化你的图标，不仅让这些图标好看，而且可以随里根据设计需求的变化来随机修改。

网页字体制作的图标放大也不会失真。

如何用网页字体制作图标

网页字体制作图标的原理是，通过CSS的content属性给HTML元素添加图标对应的字符。然后通过@font-face加载制作图标的的字体，这样注入的字符就会变成所需的图标。

首先，你需要制作图标的网页图标字体，然后用特定的ASCII字符（如A,B,C,!,@,#等）或者自定义的Unicode编码区域来对应不同的图标。不过在这个图标区域内，将不能在使用特殊的Unicode字符。

一旦你有了你的字体文件——Entypo字体是一个好的开始，你准备好了吗？

Entypo字体是一个免费的网页字体。

步骤1：加载字体文件

首先使用CSS的@font-face规则（确保你已将字体文件上传到了服务器上）定义字体图标文件的路径：

@font-face {
  font-family: "icons";
  src: url("fonts/icons.eot");
  src: url("fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("fonts/icons.woff") format("woff"),
    url("fonts/icons.ttf") format("truetype"),
    url("fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

确保你的字体来源包括了TrueType, EOT和WOFF字体格式，还需要包括SVG字体格式。虽然SVG正在快速的被WOFF格式替代，但为了兼容老的iOS设备，还是需要提供的。

有关于如何使用@font-face加载字体，和各种字体所对应的作用，要是您感兴趣，可以阅读《CSS3 @font-face》一文——@大漠。

步骤2：给放置图标的带有icon-的标签容器创建CSS样式

这个选择器允许你为标签定义了icon-字符串的容器插入图标：

[class*="icon-"] {
  background-image: none;
  display: inline;
  font-size: 1em;
  font-style: normal !important;
  font-weight: normal !important;
  height: 1em;
  overflow: visible;
  width: 1em;
}

[class*="icon-"]是一个属性选择器，表达的意思是“只要定义的类名中包含了icon-就会被选择中”。有关于属性选择器详细介绍，请点击这里——@大漠。

我们还需要为我们的图标设置字号font-size，宽度width和高度height的大小为1em。我们使用的是一个相对值，这样方便于扩展。同时也清除了字体的加粗和斜体样式，如果你应用了，会使图标扭曲。

步骤3：通过伪类选择器创建放置图标的地方

技巧来了，我们使用CSS的content属性给伪元素添加字符，然后调用第一步设置的字体：

[class*="icon-"]::before {
    content: '+';
    display: inline-block;
    font-family: "icons", fantasy !important;
    line-height: 1;
    position: relative;
    top: 2px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

这里将使用content属性添加了一个默认的字符“＋”号，使用::before给标签前面一个占位符。此外添加Webkit的font-smoothing属性，是一个好办法，可以让图标更平滑。不过这个属性还不是标准属性，使用的时候需要添加前端-webkit。

有关于CSS3的伪元素，要是您感兴趣的话，可以点击《CSS3 选择器——伪类选择器》——@大漠

步骤4：创建一个选择器来隐藏图标标签中的内容

你可以创建一个hide类，用来隐藏你想隐藏的文本，包括SEO和向后兼容的任何文本。然后在实际使用图标的标签上调用这个类名。

.hide {
  clip: rect(1px, 1px, 1px, 1px);
  height: 0;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  width: 0;
}

步骤5:给图标添加指定字符创建CSS

最终通过CSS选择器给实际图标使用指定的字符来替代content中的默认字符+。比如这个示例，使用字母t来制作“twitter”图标。

.icon-twitter::before { content: "t"; }

理论上你也可以使用::after来代替::before，但理论上带有文本的图标，一般图标都是放在文本的前面。

或者你在创建私人的网页图标字体，你也可以使用“Unicode”字符，在content属性中调用你私人的“Unicode”字符生成图标：

.icon-twitter::before { content: "/eo4o"; }

上面的代码生成“twitter”图标是相同的效果，但是，由于某种原因，CSS没有加载，那么显示图标的地方会显式成一个空格，而不是显示“t”字母来替代图标。

步骤6:添加你的HTML

现在是时候为显示图标添加所需的HTML代码。

<i class="icon-twitter">
    <span class="hide">Twitter</span>
</i>

我在这个例子中使用的是<i>和<span>标签，在这里不需要考虑具体的语义，所以他是安全的。这也是通常使用的一种方式。

下面我们来看一个典型的例子，页脚的社交媒体图标，我们可能会这样写HTML代码：

<div id="footerSocial">
    <a href="http://www.twitter.com/"><img src="twitter.png"></a>
</div>

也可以用下面的结构来替代：

<ul id="footerSocial">
    <a href="http://www.twitter.com/" class="icon-twitter">
        <li class="hide">Twitter</li>
    </a>
</ul>

通常大家会认为上面这样的结构不合理，用a标签来嵌套li标签。我个人更趋向使用下面这样的结构来替代：

<ul id="footerSocial">
    <li>
        <a href="http://www.twitter.com/" class="icon-twitter">
            <i class="hide">Twitter</i>
        </a>
    </li>
</ul>

然后根据需求添加需要的样式。有一件事情，网页字体这种技术不能制作多颜色的图标。也就是说这些图标都将是一种颜色。

有关于使用网页字体制作多颜色的图标，并不是无法实现，只是会更为复杂一些，在互联网上已经有这方面的教程。比如说Forecast Font就是一个成功的案例，使用字体图标制作了一套彩色的天气图标。相关的教程，如果你感兴趣的话可以点击PoseLab的《Use of @font-face to make icons with different colors》 、nikolaswise的《Three Color, Semantic Icon Fonts》、Tomas Mulder的《How to Create Multi-Colored Icon Fonts for Responsive Web Design》等。nikolaswise还写了一个示例——@大漠

想玩代码？请访问Jason CranfordTeague在CodePen写的示例Styling Webfont Icons。点击“CSS”选项卡，然后尝试修改body选择器中的font-size属性值。这图标可以放大和缩小，而且永远不会失真。

修饰网页字体图标

一旦创建好了，可以使用CSS样式或者CSS的伪类，如:hover、:active和:focus来修饰网页字体图标。还有很多有创意的想法，你也可以通过样式去修饰你的图标，这没有什么太多的限制。

我注意到有一个限制，但还没有找到更好的解决方案。在::before或::after上使用CSS3 Transition无法正常运行。

查看Jason CranfordTeague在CodePen制作的示例。尝试在图标上添加悬停效果或者点击“CSS”或“HTML”选项卡，查看运行的代码。

使用IcoMoon制作你自己的或网页字体图标

现在，大家又要开始纠结一个问题了“我要怎么才能获取图标的网页字体或者是制作自定义的图标网页字体”。虽然现在有很多地方提供免费和付费的图标字体，但最好的解决方案还是使用类似IcoMoon这样的网页应用程序，可以在线选择自己需要的图标，因为他向大家提供了上千种不同类型的图标。当然，你也可以在上面使用免费的图标和付费的图标。

IcoMoon允许你创建自己独特的图标集，甚至你可以创建自己自义的图标。

是什么让IcoMoon成为制作网样字体图标的杀手级的应用呢？那是因为你可以通过IcoMoon或上传SVG文件（可以通过Photoshop、Illustrator和其他制作矢量图的应用软件制作的图标导出成SVG文件）创建你自己需要的图标。

步骤1：打开IcoMoon

IcoMoon应用软件开始要火了。有几百个图标可供你选择或者通过点击“图标库”(拉到页面最底部有一个More Icon Sets…链接)，选择你自己需要的字体图标文件。

你也可以重置图标的大小，默认是16px。

步骤2A：添加图标——从提供的列表中选择

从列表中选择你需要的图标。就是这么简单，单击你喜欢的图标，他们添加到列表中。你会发现，你选择的图标他会高亮显示，图标边框变成橙色和背景变成白色。并且顶部菜单栏中会显示你选中的图标数量。

步骤2B：添加图标——编辑现有的图标

如果图标只是接近你所需的，那么你可以使用IcoMoon进行编辑。首先点击顶部的铅笔工具（编辑工具），然后点击你需要编辑的图标。这个时候图标也会高亮显示成蓝色背景。

点击你需要的编辑的图标，将会弹出一个浮窗，让你编辑图标，你可以旋转图标，调整图标的位置等。

使用IcoMoon应用编辑你需要的图标。

步骤2C：添加图标——制作你自己的图标

IcoMoon应用可以通过导入SVG文件来创建图标。OmniGraffle和Adobe Illustrator导出的SVG文件都可以应用。在顶部，点击“导入图标(Import Icons)”按钮，在弹窗中选择有效的SVG文件。

然后你就可以看自定义的图标。确认这些是你需要的图标，如果不是，你可以重新选择新的字体来替代。

创建自己定义图标的一些有用建议：

• 描边程序会忽略，所以有形状必须填充
• 所有填充必须连结在一起
• 只使用一种颜色（最好是黑色），因为填充将转换成一个单一的颜色
• 不要使用奇/偶的填充规则
• 输出的图像为单一的对象。在Illustrator中，将画板转成图形的边界。(Object > Artboards > Fit to Artwork Bounds)

步骤3：生成字体文件

在页面脚部，点击“font”按钮。

该首先项允许你修改你的字体名称，创建带icon-前缀的类名和创建base64编码，然后将这些数据结合到一个CSS文件之中。

每个图标都可以调整其对应的字符。只需要点击当前图标的位置，键入自己需要的字符。理想情况之下，按字母的顺序开始构建。既然你知道谁会使用这些图标，应该花一些时间将给这些图标定义一些更有意义的名称。

在你的字体中你可以随意给图形调整位置和代码。

或者你也可以选择使用Unicode编码。在左上方，有一个下拉重置编码。单击选择“Private Use Area”。这将重新标识所有的字形和Unicode编码。

一旦，你设置好这些，你可以点击“Download”按钮下载文件。

步骤4：在你的网站上添加字体

网站上下载下来的.zip文件，里面包含了一切使用说明，你可以将这些添加到你的网站上。

提供的CSS示例中，你可以复制和指定这些图标的具体位置。然而，IcoMoon包括了一个微小的CSS代码来设置图标，他采用了大的负margin，并且隐藏了HTML文本和绑定的数据，而不是我们使用的font-size的方法。

结束

使用网页字体制作图标并不是一个全新的概念。像IcoMoon这样的网页应用真的是一个很好的工具，能帮助你使用字体制作图标成为现实。随着网页字体制作图标的日益普及，将会迅速取代CSS　Sprites方案，这也让UI设计师可以加入更多的创意空间。

但是，在Web标准仍然会有一些失踪。可能使网页图标更加有用和有效，W3C标准应该添加icon或iconlable标签添加到HTML中，这样让图标更具语义化。在此期间，我们不得不更多的先用i或 span标签。

扩展阅读

• Design 101 for Educators: An Icon Is Worth (at Least) a Dozen Words
• Using Icon Fonts
• We’re in an icon-sharpness limbo
• 15 Icon (@font-face) Web Fonts to Improve your User Interfaces
• Symbolset
• @font-face制作Web Icon
• IcoMoon+@font-face+Sass制作Icons
• 自定义Font Icon
• Sass制作Font Awesome图标
• 如何把你的图标转换成web字体
• 再探@font-face及webIcon制作
• @font-face制作图标教程集锦
• @font-face制作图图标案例集锦

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

原文地址：http://www.w3cplus.com/css3/responsive-webfont-icons.html