很多人只要一提到 @font face 规则，心中就会不由自主“哦~~”的一声：“这个我知道，可以用来生成自定义字符小图标！”话是没错，问题在于很多人就以为生成字符小图标就是 @font face 规则的全部，实际上只是功能之一，如果真正了解 @font face 规则，你会发现， @font face 规则可以做的事情其实非常多，尤其我们不考虑IE7，IE8浏览器的情况下。
一、 @font face的本质是变量
虽然说CSS3新世界才出现真正意义上的变量 var （参见此文：“ 了解CSS/CSS3原生变量var ”），但实际上，CSS世界中，就已经出现了本质上就是变量的东西， @font face 规则就是其中之一，@font face的本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单的自定义字体，还包括字体重命名，默认字体样式设置等等。
这个“变量”的意识很重要，有助于我们发挥 @font face 的潜力，可以让我们的CSS代码更加的精简，更方便的维护等。
在进入正题之前，我们先要对 @font face 规则有个大致的面面观。
@font face 规则支持的CSS属性有： font-family ， src ， font-weight ， font-style ， unicode-range ， font-variant ， font-stretch ， font-feature-settings 。例如：
@font-face {
font-family: 'example';
src: url(example.ttf);
font-style: normal;
font-weight: normal;
unicode-range: U+0025-00FF;
font-variant: small-caps;
font-stretch: expanded;
font-feature-settings："liga1" on;
}
</div>
属性还是挺多的，而且有些属性，估计是他认识你，你不认识他。但是从实用角度来讲，有些属性其实可以不用去深究，例如 font-variant ， font-stretch ， font-feature-settings 这 3 个属性。为什么呢？因为按照我的经验理解，这 3 个属性给我感觉更像是专为英文设计的，所以如果不是有业务需要，可以先放一放。
好，现在，是不是感觉压力一下子小了很多，我们需要在意的可以自定义的属性就只剩下下面这些：
@font-face {
font-family: 'example';
src: url(example.ttf);
font-style: normal;
font-weight: normal;
unicode-range: U+0025-00FF;
}
</div>
估计会有小伙伴疑惑 @font-face 规则中的 font-style ， font-weight 以及 unicode-range 这些属性有什么用，尤其 font-style ， font-weight ，好像就是专门过来打酱油的。实际上，这里的每个属性都不是泛泛之辈，都是有故事的人。
在介绍每个属性之前，有必要郑重声明一下，接下来有大量的案例，全是基于 local 本地字体做示意的，而IE7，IE8浏览器是不支持 local 本地字体的，所以，本文的标题是“CSS3背景下的……”，就是这么个原因，大家注意明辨，如果你的项目还需要兼容IE8，本文介绍，这些好东西可能就需要斟酌斟酌了。
二、 @font face常用CSS属性详细介绍
我们一个一个来介绍：
font-family
这里的 font-family 可以看成是一个字体变量，名称可以非常随意，例如直接一个美元符号 '$' ，例如：
@font-face {
font-family: '$';
src: local("Microsoft Yahei");
}
</div>
这时候，对普通HTML元素，你设置其 font-family 属性值为 '$' ，则其字体表现就变成了“微软雅黑”（如果本地有这个字体）。
甚至非IE浏览器下可以直接使用纯空格 ' ' ，不过有一点需要注意，就是使用这些稀奇古怪的字符或者有空格的时候，一定要加引号。
虽然说自己变量名可以很随意，但是有一类名称，不能随便设置，就是原本系统就有的字体名称，例如下面的代码：
@font-face {
font-family: 'Microsoft Yahei';
src: local(SimSun);
}
</div>
从此“微软雅黑”字体就变成了“宋体”。当然，有时候我们说不定就需要这种覆盖，比如说新来了一个设计主管，平生最看不惯“微软雅黑”，希望换成其他字体，这个时候我们就可以使用这个变量覆盖轻轻松松完成整站的字体变更。
src
src 表示调用字体文件，非是本地字体文件（IE9+支持），也可以是线上地址（可能有跨域限制）。
本文主要着重介绍本地字体文件的应用。
作用1：字体文件名简写
现在很多网站会使用“微软雅黑”字体，但是，“微软雅黑”的名称有点长：
.font {
font-family: 'Microsoft Yahei';
}
</div>
小手一抖，说不定就拼错了，还要加引号，还要加空格，好麻烦的勒。此时我们就可以利用 @font face 规则简化，这样就容易记忆了，书写更快了：
@font-face {
font-family: YH;
src: local("Microsoft Yahei");
}
</div>
使用的时候直接：
.font {
font-family: YH;
}
</div>
多么干净，多么清爽，心情多么舒畅！
src 还支持多个 local 字体地址同时出现，嘿，这简化的CSS代码可不是一个字体名了，而是一大波字体名称了，例如某网站使用了大量类似下面的 font-family 属性值：
body {
font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}
.xxxx {
font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}
</div>
虽然说，实现的时候，借助了Sass, Less之类工具让字体名称们成为了变量，写代码的时候好像也没怎么吃力，但是最终生成的CSS其实是比较啰嗦，如果我们走本质上就是变量的 @font face ，是不是不仅开发简单，代码也简单了，如下处理：
@font-face {
font-family: BASE;
src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}
</div>
于是我们用字体的时候直接：
body {
font-family: BASE;
}
.xxxx {
font-family: BASE;
}
</div>
看语义又好，代码又简单，实用又方便，超级使用的小技巧。
当然， local 本地作用还不止这些。
业界有个名为“ 字蛛 ”的中文字体处理工具，可以提取页面中使用的特殊中文字体并生成新的体积更小的自定义字体。我们可以在这个基础上更进一步，举个例子：
一些特殊的标题设计师就是喜欢用“方正粗雅宋”这个字体（已经购得版权），但是很显然，这么帅气的字体，几乎很少有用户安装的，所以实际开发的时候，全都是通过工具而生成一个全新的精简版的“方正粗雅宋”字体文件，再通过 src 属性 url() 方法外链这个字体文件。
很棒的方案，但还不够完美，为什么呢？虽然安装“方正粗雅宋”这个字体的用户并不多，但并不表示没有用户使用之。试想一下，假如有用户安装了这个字体，结果你在网页呈现的时候，还要再去外链一个额外的文件地址，岂不是白白的浪费？既浪费流量，体验又不一定好，如果字体文件加载慢，会看到文字“变形”的过程，显然是不友好的。
我们可以借助 @font face 规则中的 local 实现代码和体验上的进一步的提升，如下：
@font-face {
font-family: FZCYS;
src: local("FZYaSongS-B-GB"),
url("FZCYS.woff2"),
url("FZCYS.woff"),
url("FZCYS.ttf");
}
</div>
于是乎，那些安装了“方正粗雅宋”这个字体的用户，就没有任何字体文件请求。加载更快了，用户体验上升了，还省了流量，如此百益无一害的事情，还不妥妥的用起来。
font-style
在Chrome浏览器下， @font face 规则设置 font-style:italic 可以让文字倾斜，但是这并不是其作用所在。
@font face 规则中的 font-style 和 font-weight 类似，都是用来设置对应字体样式或自重下该使用什么字体。因为有些字体可能会有专门的斜体字，注意这个斜体字，并不是让文字的形状倾斜，而是专门设计的倾斜的字体，很多细节会跟物理上的请求不一样。于是，我在CSS代码中使用 font-style:italic