语法规则
先看下@font-face的语法规则：
@font-face {
font-family:<YourWebFontName>;
src:<source>[<format>][,<source>[<format>]]*;
[font-weight:<weight>];
[font-style:<style>];
}
取值说明：
1、YourWebFontName: 自定义字库名称（一般设置为所引入的字库名），后续样式规则中则通过该名称来引用该字库。最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”
2、src：设置字体的加载路径和格式，通过逗号分隔多个加载路径和格式
3、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；
4、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
5、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
src属性后还有一个 local(font name) 字段，表示从用户系统中加载字体，失败后才加载webfont。
src: local(font name), url("font_name.ttf")
字体格式
对于@font-face而言，兼容性问题就是各浏览器所能识别的字体格式不尽相同。
1、TrueType格式(.ttf)：
Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
2、OpenType格式(.otf)：
以TrueType为基础，也是一种原始格式，但提供更多的功能。
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
3、Web Open Font格式(.woff)：
针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
4、Embedded Open Type格式(.eot)：
IE专用字体格式，可以从TrueType格式创建此格式字体。
浏览器支持：IE4+
5、SVG格式(.svg)：
基于SVG字体渲染的格式。
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face {
font-family:'YourWebFontName';
src:url('YourWebFontName.eot?')format('eot');/*IE*/
src:url('YourWebFontName.woff')format('woff'),
url('YourWebFontName.ttf')format('truetype');/*non-IE*/
}
但为了让各多的浏览器支持，也可以写成：
@font-face {
font-family:'YourWebFontName';
src:url('YourWebFontName.eot');/* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */
url('YourWebFontName.woff')format('woff'),/* Modern Browsers */
url('YourWebFontName.ttf')format('truetype'),/* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName')format('svg');/* Legacy iOS */
}
既然要使用里面的图标，那么多图标，怎么调用呢，这个问题就是上篇文章的内容了字体图标生成原理（1）
