很多人只要一提到 @font face 規(guī)則，心中就會不由自主“哦~~”的一聲：“這個我知道，可以用來生成自定義字符小圖標！”話是沒錯，問題在于很多人就以為生成字符小圖標就是 @font face 規(guī)則的全部，實際上只是功能之一，如果真正了解 @font face 規(guī)則，你會發(fā)現(xiàn)， @font face 規(guī)則可以做的事情其實非常多，尤其我們不考慮IE7，IE8瀏覽器的情況下。

一、 @font face的本質是變量

雖然說CSS3新世界才出現(xiàn)真正意義上的變量 var （參見此文：“ 了解CSS/CSS3原生變量var ”），但實際上，CSS世界中，就已經出現(xiàn)了本質上就是變量的東西， @font face 規(guī)則就是其中之一，@font face的本質上就是一個定義字體或字體集的變量，這個變量不僅僅是簡單的自定義字體，還包括字體重命名，默認字體樣式設置等等。

這個“變量”的意識很重要，有助于我們發(fā)揮 @font face 的潛力，可以讓我們的CSS代碼更加的精簡，更方便的維護等。

在進入正題之前，我們先要對 @font face 規(guī)則有個大致的面面觀。

@font face 規(guī)則支持的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;}

屬性還是挺多的，而且有些屬性，估計是他認識你，你不認識他。但是從實用角度來講，有些屬性其實可以不用去深究，例如 font-variant ， font-stretch ， font-feature-settings 這 3 個屬性。為什么呢？因為按照我的經驗理解，這 3 個屬性給我感覺更像是專為英文設計的，所以如果不是有業(yè)務需要，可以先放一放。

好，現(xiàn)在，是不是感覺壓力一下子小了很多，我們需要在意的可以自定義的屬性就只剩下下面這些：

@font-face {  font-family: 'example';  src: url(example.ttf);  font-style: normal;  font-weight: normal;  unicode-range: U+0025-00FF;}

估計會有小伙伴疑惑 @font-face 規(guī)則中的 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");}

這時候，對普通HTML元素，你設置其 font-family 屬性值為 '$' ，則其字體表現(xiàn)就變成了“微軟雅黑”（如果本地有這個字體）。

甚至非IE瀏覽器下可以直接使用純空格 ' ' ，不過有一點需要注意，就是使用這些稀奇古怪的字符或者有空格的時候，一定要加引號。

雖然說自己變量名可以很隨意，但是有一類名稱，不能隨便設置，就是原本系統(tǒng)就有的字體名稱，例如下面的代碼：

@font-face {  font-family: 'Microsoft Yahei';  src: local(SimSun);}

從此“微軟雅黑”字體就變成了“宋體”。當然，有時候我們說不定就需要這種覆蓋，比如說新來了一個設計主管，平生最看不慣“微軟雅黑”，希望換成其他字體，這個時候我們就可以使用這個變量覆蓋輕輕松松完成整站的字體變更。

src

src 表示調用字體文件，非是本地字體文件（IE9+支持），也可以是線上地址（可能有跨域限制）。

本文主要著重介紹本地字體文件的應用。

作用1：字體文件名簡寫

現(xiàn)在很多網站會使用“微軟雅黑”字體，但是，“微軟雅黑”的名稱有點長：

.font {    font-family: 'Microsoft Yahei';}

小手一抖，說不定就拼錯了，還要加引號，還要加空格，好麻煩的勒。此時我們就可以利用 @font face 規(guī)則簡化，這樣就容易記憶了，書寫更快了：

@font-face {  font-family: YH;  src: local("Microsoft Yahei");}

使用的時候直接：

.font {    font-family: YH;}

多么干凈，多么清爽，心情多么舒暢！

src 還支持多個 local 字體地址同時出現(xiàn)，嘿，這簡化的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;}

雖然說，實現(xiàn)的時候，借助了Sass, Less之類工具讓字體名稱們成為了變量，寫代碼的時候好像也沒怎么吃力，但是最終生成的CSS其實是比較