真正了解CSS3背景下的@font face规则

很多人只要一提到 @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-variant ， font-stretch ， font-feature-settings 这 3 个属性。为什么呢？因为按照我的经验理解，这 3 个属性给我感觉更像是专为英文设计的，所以如果不是有业务需要，可以先放一放。

好，现在，是不是感觉压力一下子小了很多，我们需要在意的可以自定义的属性就只剩下下面这些：

估计会有小伙伴疑惑 @font-face 规则中的 font-style ， font-weight 以及 unicode-range 这些属性有什么用，尤其 font-style ， font-weight ，好像就是专门过来打酱油的。实际上，这里的每个属性都不是泛泛之辈，都是有故事的人。

在介绍每个属性之前，有必要郑重声明一下，接下来有大量的案例，全是基于 local 本地字体做示意的，而IE7，IE8浏览器是不支持 local 本地字体的，所以，本文的标题是“CSS3背景下的……”，就是这么个原因，大家注意明辨，如果你的项目还需要兼容IE8，本文介绍，这些好东西可能就需要斟酌斟酌了。