在介绍每个属性之前，有必要郑重声明一下，接下来有大量的案例，全是基于 local 本地字体做示意的，而IE7，IE8浏览器是不支持 local 本地字体的，所以，本文的标题是“CSS3背景下的……”，就是这么个原因，大家注意明辨，如果你的项目还需要兼容IE8，本文介绍，这些好东西可能就需要斟酌斟酌了。
二、 @font face常用CSS属性详细介绍
我们一个一个来介绍：
font-family
这里的 font-family 可以看成是一个字体变量，名称可以非常随意，例如直接一个美元符号 ‘$’ ，例如：
@font-face {
font-family: '$';
src: local("Microsoft Yahei");
}这时候，对普通HTML元素，你设置其
font-family 属性值为
'$' ，则其字体表现就变成了“微软雅黑”（如果本地有这个字体）。甚至非IE浏览器下可以直接使用纯空格
' ' ，不过有一点需要注意，就是使用这些稀奇古怪的字符或者有空格的时候，一定要加引号。虽然说自己变量名可以很随意，但是有一类名称，不能随便设置，就是原本系统就有的字体名称，例如下面的代码：
@font-face {
font-family: 'Microsoft Yahei';
src: local(SimSun);
}从此“微软雅黑”字体就变成了“宋体”。当然，有时候我们说不定就需要这种覆盖，比如说新来了一个设计主管，平生最看不惯“微软雅黑”，希望换成其他字体，这个时候我们就可以使用这个变量覆盖轻轻松松完成整站的字体变更。
src
src 表示调用字体文件，非是本地字体文件（IE9+支持），也可以是线上地址（可能有跨域限制）。本文主要着重介绍本地字体文件的应用。
作用1：字体文件名简写
现在很多网站会使用“微软雅黑”字体，但是，“微软雅黑”的名称有点长：
.font {
font-family: 'Microsoft Yahei';
}小手一抖，说不定就拼错了，还要加引号，还要加空格，好麻烦的勒。此时我们就可以利用 @font face 规则简化，这样就容易记忆了，书写更快了：
@font-face {
font-family: YH;
src: local("Microsoft Yahei");
}使用的时候直接：
.font {
font-family: YH;
}多么干净，多么清爽，心情多么舒畅！
