html中web字体图标,响应式Web图形篇 —— icon fonts（字体图标）在网页中的应用...

响应式设计(Responsive Design)作为「救世主」的身份，已经在 Web 界布道了好几年，丝毫不亚于当年的「Ajax」先生。其核心就是：针对不同设备和应用场景，作出合理性的适应。狭义地看，就是 Web page 在不同分辨率下借助 media qurey 来调整页面布局和内容显示，三个关键词是：Fluid grids, Flexible images, Media queries.

其中 Flexible images 是最为棘手的地方。因为前面提到，现在的设备多样化，不同分辨率和不同 PPI 给图片自适应带来了空前复杂度。目前还没有一套完美的解决方案来应对，W3C那边还在拟定 Responsive Images和 Picture Element 的相关标准。但在这之前你需要采取多管齐下的方式，针对媒体元素不同的使用场景，制定不同的自适应策略。目前主要有三种主流方式：

这一期我们主要来讲讲 icon fonts 的应用。

什么是 icon fonts?

利用字体工具把我们平时 Web 上用的图形图标(icons)转换成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到网页里，用以显示 icons。因为字体是矢量化图形，它天生具有「分辨率无关」的特性，在任何分辨率和PPI下面，都可以做到完美缩放，不会像传统位图，如：png，jpeg，放大后有锯齿或模糊现象。

注：上图是 Apple 纪念 Mac 发布30周年网站截图，网页内大量运用了 icon fonts 来塑造不同年代发布的产品，这类 iOS 7 引入的线条风格图标，使用 icon fonts 来表现最合适不过了。

为什么要用 icon fonts？

除了「分辨率无关」这个最大的优点之外，icon fonts 还具有：

当然 icon fonts 也有它的不足：

所以 icon fonts 也并不是一套完美的响应式图片的解决方案，当它适宜你的应用场景时，比如：

那么 icon fonts 是一个令设计师和前端工程师都心花怒放的方案。

如何制作 icon fonts？

icon fonts 的制作主要有两条思路：

手动制作

在icon fonts 自动生成器没有诞生之初，大家只能依靠字体编辑软件来完成icon fonts 的制作，简单介绍一下手动制作的流程。

手动制作 icon fonts 需要具备一定字体设计的知识，如有兴趣可作尝试。而自动生成工具用起来就傻瓜和省心多了。

自动生成当时采用的是阿里巴巴提供的免费在线工具iconfont.cn。Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

「风车」应用内的图标有两个来源： 一些从开源图标库拿来，一些是设计师自己制作。接下来详细介绍一下，我们是如何利用 iconfont.cn 这个在线工具生成了这 56 个图标的 icon fonts。

步骤一

参照 iconfont.cn 提供的图标制作模版，在Illustrator 画布的16x16网格内，参考基线、上升部、下降部来调整图标大小和位置。

调整矢量图标需要注意几点：

步骤二

然后从Illustrator 保存为SVG文件，使用默认的SVG设置即可。

步骤三

你可以拖动一个或多个SVG图标到iconfont.cn 的上传表单，完成上传后会提示设置名称和tag，点击「完成上传」开始生成icon fonts 。生成完成后，你可以点击要下载的图标加入购物车，然后「下载至本地」。

(点击图像放大)

步骤四

解压刚下载的文件包，除了EOT、SVG、TTF、WOFF四种 web fonts 字体外，还有个 demo.html 展示所有 icons 及其对应的字体编码。之所以有4种字体格式，是考虑到不同浏览器不同平台对字体格式的支持不一样，具体看下面 CSS 里的注解。

复制4个字体文件到 assets 或 fonts 目录下，然后在 CSS 文件加入 @font-face 声明(注意更改字体所在的文件路径)。@font-face {font-family: 'iconfont';

src: url('iconfont.eot'); /* IE9*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('iconfont.woff') format('woff'), /* chrome、firefox */

url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */

}

再定义一个 icon-* 通配我们所有图标的共有 CSS 样式，[class^="icon-"], [class*=" icon-"] {

display: inline-block;

speak: none

font-family: "iconfont";

font-size: 16px;

line-height: 1;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

最后是利用 :before 来注入每个 icon 对应的字体编码.icon-bell:before {

content: "\003432";

}

.icon-search:before {

content: "\003433";

}

现在你可以这样显示一个铃铛图标：

下图就是我们「风车」应用 icon fonts 的实例。

(点击图像放大)

icon fonts 移动端应用

前面提到， icon fonts 在移动端的兼容性稍微差一点，有几个问题：

关于如何应用 icon fonts 到原生的 iOS/Android App 中去，iconfont.cn 上面有具体的教程，可以查看一下。

其它 icon fonts 工具

类似 iconfont.cn 这类在线生成工具有很多，就不再一一详细介绍，最著名的还有：

这些工具基本功能类似，但有少许功能差别，像 icomoon 还支持字体的连字(Ligatures)功能。通过设置 「bell」为铃铛图标的连字，当你在文本中写 「bell」时自动转换成铃铛图标。像 fontfello是开源软件，意味着更加灵活和定制的可能性。

如果你对使用英文软件完全没有障碍，我强烈建议使用 icomoon，体验和功能都非常强大。当然作为国内的同行，还是要支持一下 iconfont.cn。

结语

icon fonts 作为 web fonts 的一种「特殊」应用，很好的解决了「响应式设计」中图形无损自适应的难题。设计师不再需要维护不同大小、不同颜色的多版本素材，图形矢量化之后，交给那些在线生成器就可以了。对于前端工程师，利用 HTML+CSS 就可以灵活的使用成百上千种图标，无需担心切图、定位、优化等传统位图要应付的情况。而用户，简洁、清晰的图标带给他们赏心悦目的感觉之外，浏览网站的速度体验也将大大提升。