字体图标和 @font-face
先来简单的介绍一下字体图标。字体图标是近两年才流行起来的技术，主要是因为 CSS3 增加了一个非常实用的属性 @font-face。传统的网页中的字体设置，使用 font-family 属性来定义，而且受限于浏览者电脑上所安装的字体，如果浏览者电脑上没有安装对应字体，那么网页渲染起来就会使用其他字体来代替。
而新增的 @font-face 改变了这一现状，使用该属性，可以指定服务器上的一个字体，当浏览者访问的时候，会优先下载服务器上的字体，然后再使用该字体渲染网页。这样就可以发挥设计师的想象，灵活的任意应用字体，同时不需要考虑不同平台的差异。该属性的兼容性也非常好，令人惊奇的是，早期 IE 就已经内置了这个功能（虽然要求字体的格式为 EOT ），完全可以用在 IE6、IE7 上面。
不过不要高兴的太早，这个属性对于中文字体来说，没有意义。因为中文文字太多，字体往往有几兆甚至十几兆大小，如果使用这个属性，还需要转换各个格式的字体，让浏览器先下载几十兆的字体再渲染网页是不现实的。
但是也不要悲伤，很快人们就发现 @font-face 功能不仅仅可以用在改变文章的字体样式上，还可以来做字体图标。
字体其实就是一种图标，把对应的基础的文字，渲染成有棱有角的文字。如果某个文字的字体，并不设计成那个文字的变形，而设计成截然不同的图标，那么当网页中出现这个文字，就会渲染出一个图标。
配合上 @font-face 就有了 Font Icon 这项技巧。在网页中使用 @font-face 引入生成好的 字体文件 ，然后在网页中需要使用某个图标的地方，写上对应的“文字”，那么在浏览器中就可以看到图标。
快捷方便的 Font Icons 生成工具： Iconfont
那么生成这个字体文件就变成了第一个难题，因为我毕竟不是设计师，也不是字体开发者，我怎么来做这样的字体图标？所以就有很多技术领先的团队或者公司，开发了用于生成这种字体的在线工具。Iconfont 就是今天要介绍的工具，它是由阿里巴巴前端团队开发的，国内领先（好像就这一家，由之前 一淘UX 开发的版本改进的）的。
Iconfont 使用起来很简单，打开它的首页，你会发现很多图标，点击你需要的图标，就会发现图标到了右上角的购物车里，选择好了图标之后，点击购物车，即可下载下来一个 zip 包。
解压之后，会出现：demo.html, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 这几个文件。
其中 demo.html 文件是使用说明和效果，另外四个就是为兼容各个平台而转换生成的字体文件。你只需要打开 demo.html 文件就可以看到详细的使用说明，这里就不再赘述了。
使用字体图标有很多好处，大体如下：
- 兼容性好，各个平台浏览器基本都可以使用，而且在某些低级浏览器中，效果比图片更好
- 相对于同效果的图片相比，体积小，减少 http 请求，增加前端性能
- 可维护性好，维护起来可以通过增减字体快速应用
- 交互性好，改变字体颜色即可改变图标的颜色，同时可以配合 CSS3 的动画、渐变、过渡、变形等属性实现复杂的交互
当然也有一些缺点，例如图标通常只有一种颜色，虽然渐变可以使其颜色更加丰富，但是兼容性没了。还有一些其他的缺点，不过对于 iconfont 这个工具来说，最大的缺点就是图标太少，而且基本都是电商相关的。毕竟国内这块技术发展比较晚，优秀的设计师也比较少，仅靠阿里前端团队能做成这样已经很不容易了。如果你需要更多的字体图标，也可以来 fontello 看一下，这上面有海量的图标（甚至有新浪微博和腾讯 QQ ），也很不错。但是相对国内的来说，不太稳定。
