所谓iconfont就是用字体文件取代图片文件，来展示图标，特殊字体等元素。
---------优点---------
- 轻薄，字体文件小，一般10-30kb（用字蛛压缩）
- 兼容，透明完全兼容IE6
- 丰满，在hover，click等交互效果看来更为方便
- 百搭，矢量，缩放不变形，方便修改颜色，大小
- 安静，通过base64编码置于样式表内，不产生图片请求。
IconFont的实现在css里主要体现在@font-face，@font-face是css3中的一个模块，但是喜大普奔的是IE4+就可以支持它了！@font-face主要是把自己定义的Web字体嵌入到你的网页中。
这样我们在web开发的过程中，就可以使用Web安全字体之外的字体了。并且像一些常用的图标，我们也可以定义成font-face。这样就可以方便的使用那些自定义的字体，很轻松的就可以改变他们的颜色大小。省去很多切图的麻烦~
这篇文章主要记录了我的一些学习和实践 -。-
语法规则
@font-face{
font-family:<YourWebFontName>;
src:<source>[<format>];
[font-weight:<weight>];
[font-style:<style>];
}
取值说明：
- YourWebFontName是指你自定义的字体名称，最好是使用你下载的默认字体，它将被引用到你的Web元素中的font-family。
- source：指的是你自定义的字体的存放路径，可以是相对路径，可以是绝对路径。
- format：指的是你自定义的字体的格式，主要帮助浏览器识别。其值主要有以下几种类型：
truetype(.ttf)，opentype(.otf)，truetype-aat，embedded-opentype，avg等。 - weight和style：这个应该很熟悉，weight指是不是粗体，style指的字体样式，比如斜体。
<u>由于foramt涉及到浏览器支持的问题</u>
所以这边要说一下各格式的浏览器支持的情况。
- .ttf【IE9+,FF3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
- .otf【FF3.5+,Chrome4.0+，Safari3.1+，Opera10+,iOS Mobile Safari4.2+】
- .woff(Web Open Font Format)【IE9+,FF3.5+,Chrome6.0+，Safari3.6+，Opera11.1+】
- .eot(Embedded Open Type).eot是IE专用的字体，可以从.ttf创建此格式字体【IE4+】
- .svg是基于SVG字体渲染的一种格式【Chrome4.0+，Safari3.1+，Opera10+,iOS Mobile Safari3.2+】
根据以上介绍的浏览器支持的情况来看，在@font-face中我们必须得写上多种字体格式来获得更多浏览器版本的支持！
理论说完，下面要开始实践了
首先，获取特殊字体。
获取特殊字体的途径，不外是找到付费网站，或者是自己去搜索然后下载。当然，我们选择后者的情况较多啦~Dafont.com我们经常会在这边找一些字体。
找到了字体，为了获取更多浏览器的支持，我们就需要各种字体格式了
转化工具点这里
然后我们会看到以下界面
点击UPLOAD FONTS按钮，然后上传已保存在自己电脑的特殊字体，选择你要转换的格式，选中Agreement那边的选框，之后就可以点击DOWNLOAD YOUR KIT按钮download你所需的字体了。
我的实践
1、我的字体已经下载在本地了，大家可以按上文所述在Dafont.com下载字体
2、在fontsquirrel.com转换我自己需要的字体格式
然后就有了下图所示的字体们
css：
html：
页面：
上文我们有说，@font-face除了可以将本地的字体用到web，也可以将图标做成字体。
对于字体图标，在我的实际工作当中深有体会，不用切小图标，不用计算background-position还可以随意修改大小和颜色，简直是太开心了。
首先推荐一些图标字库：
iconfont
这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。fontello.com
在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。icomoon
可以在线导入的SVG格式字体,并迚行编辑,然后下载来使用。Glyphicon Halflings
可以在Bootstrap下免费使用。自带了200多个图标。font-awesome
Font Awesome是一个强大的字体制作Icon的案例，作者在Bootstrap Icon的基础上将Icon图片换成了字体来制作。
我们在需要使用字体图标的时候，当然首先就会选择直接去这些网站（或者你也可以自己去发掘其他的一些网站，欢迎分享~）下载。下载的压缩包一般都会直接有各种格式的字体，现成的css文件和html的demo。直接用就好。
如果这些网站满足不了我们的需求的时候，我们就需要自己学着<u>制作一些字体</u>了。
如何制作自己的字体
1、fontlab，但是这个应用收费，而且并不便宜
2、fontcreator，免费的，最常用。
点击查看fontcreator的具体使用方法
在我们制作好自己的字体之后，使用方法就和上面介绍的一样了~
参考文档CSS3 @font-face
