欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：
https://segmentfault.com/blog/frontenddriver
1. 从FONT-FACE说起
要想了解iconfont，得从一个新的css3规则说起。css3中，新增了一种样式规则，@font-face，这个规则可以用来引入自定义的字体，到客户端。以前，我们的字体只能听任客户端的。因为用户没有安装的话，我们强制要求显示也没有办法。
现在使用@font-face则可以引入在web服务器上存放的字体文件，从而达到，可以使用一些客户端浏览器上不存在的字体，等到浏览器去访问并渲染时，去下载font-face指定的字体。并命名为我们想要的字体。如图1.1：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: myfont;
src: url('./myfont.otf');
}
.usefont {
font-family: myfont;
}
</style>
</head>
<body>
<h1 class="usefont">
测试1
</h1>
<h1>
测试2
</h1>
</body>
</html>
图1.1
上面的自已个h1中使用的，正是我们存在服务端的字体。由于各个浏览器的兼容性问题，
1.IE浏览器：EOT
2.Mozilla浏览器：OTF，TTF
3.Safari浏览器：OTF，TTF，SVG
4.歌剧：OTF，TTF，SVG
5.Chrome浏览器：TTF，SVG
所以，我们需要准备多个格式的不同的字体文件。指代同一份字体。
@font-face {
font-family: 'icons';
src: url(../font/curiconfont.eot#iefix) format('embedded-opentype'),
url(../font/curiconfont.woff) format('woff'),
url(../font/curiconfont.ttf) format('truetype'),
url(../font/curiconfont.svg?#iconfont) format('svg');
font-weight: normal;
font-style: normal;
}
后面的format指代的是墙面的资源是那种格式的。如想更详细了解，可以百度一下font-face。上面提到的例子可以在github上的hellofontface.html中找到。
2 什么是iconfont
既然font-face可以指定字体文件，那么字体长成什么样，不就是开发者说的算了么。我们可以描述一个字体，它长成这样：
3 iconfont怎么用
我们来拿手机百度首页的字体做个小例子试试(如图3.1)，我们新加入一个font-face，起名为myFont，在需要使用这份iconfont的部分，font-family设置为myFont，则这部分区域可以使用上该font文件:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
@font-face {
font-family: myfont;
src: url('http://m.baidu.com/static/index/iconfont/iconfont_c0634602.woff');
}
.usefont {
font-family: myfont;
}
</style>
</head>
<body>
<h1 class="usefont">

</h1>
<h1>

</h1>
</body>
</html>
图3.1
我们看到我们在网页上写了一个字符，本来这个字符对应的文字应该是什么都没有：
4 iconfont怎么做？
既然知道了怎么用，就要开始了解一下，如何制作一个iconfont了。国内有阿里巴巴的iconfont平台，可以选自己喜欢的图标导出iconfont。
如果我们手里有一些图标，想转换为iconfont的话，可以直接使在线工具转换：
http://image.online-convert.com/convert-to-svg
设计师们也可以使用illustrator直接将图片导出为svg，具体导出方式可以参考如下链接：
http://www.w3cplus.com/svg/svg-files-from-illustrator-to-the-web.html
导出单个icon的svg后，可以上传至阿里巴巴的iconfont平台，与其他图标拼合成一张字体文件。(后续会更新一个我们自产的iconfont生成框架)
5 iconfont的利与弊
看到这里，一些同学肯定会问，那我们为什么要用iconfont呢？直接用图片不就好了。
这里我们分析一下使用iconfont的利与弊
5.1 iconfont的利
5.1.1 iconfont图像放大后，不会失真。
相信读者们没有见过文字在网页上放大的时候会失真的状况吧，因为字体是矢量的，字体的描绘只记录绘制的路径。而图片不是，我们如果把一张小图放大若干倍之后，会发现图像变得模糊了。因为图像是基于像素点的描述，放大后，之前图像的一个像素，被放大为多个像素。自然是会失真的
5.1.2 iconfont节省流量
在图片清晰度要求越高的情况下，我们的图片本身就会越大。这样非常耗费资源，而且，图像需要的色彩值信息，也会存储。这样也极大的浪费了空间。iconfont颜色由css决定，尺寸要求变大的话，则适应性的变大。传输的大小不会变大。
5.1.3 iconfont在颜色变幻方面很简单
试想，如果一个图标一开始是黑色的hover上去的时候变为蓝色的话，如果这个icon是用图片来实现的话，我们需要在hover的时候，更换背景图片，如果使用iconfont的话，则可以直接替换icon的color就行。
5.2 iconfont的弊
5.2.1 iconfont不能支持一个图像里面混入多重颜色
作为文字，是不会出现左边是红色右边是绿色的状况的。一个文字，是一个整体，统一的颜色。这个颜色就取决于css的color了。所以使用iconfont做图标的话，最好使用纯色的图标。
5.2.2 iconfont的使用没有使用图片那么直接，简单。
如果单论直接使用的话，图片还是比较便捷的。
至于自己的网站要不要使用iconfont就看各位了。
本章的例子在github上，需要的同学请自行查看：
https://github.com/houyu01/iconfontsample
接下来的一篇文章，我将会和读者们一起聊聊前端模板拼装与渲染的那些事儿，不要走开，请关注我.....
前端模板拼装与渲染的那些事儿
原创文章,版权所有,转载请注明出处
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。