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

一、 @font face的本質(zhì)是變量

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

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

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

@font face 規(guī)則支持的CSS屬性有： font-family ， src ， font-weight ， font-style ， unicode-range ， font-variant ， font-stretch ， font-feature-settings 。例如：

屬性還是挺多的，而且有些屬性，估計(jì)是他認(rèn)識你，你不認(rèn)識他。但是從實(shí)用角度來講，有些屬性其實(shí)可以不用去深究，例如 font-variant ， font-stretch ， font-feature-settings 這 3 個(gè)屬性。為什么呢？因?yàn)榘凑瘴业慕?jīng)驗(yàn)理解，這 3 個(gè)屬性給我感覺更像是專為英文設(shè)計(jì)的，所以如果不是有業(yè)務(wù)需要，可以先放一放。

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

估計(jì)會(huì)有小伙伴疑惑 @font-face 規(guī)則中的 font-style ， font-weight 以及 unicode-range 這些屬性有什么用，尤其 font-style ， font-weight ，好像就是專門過來打醬油的。實(shí)際上，這里的每個(gè)屬性都不是泛泛之輩，都是有故事的人。

在介紹每個(gè)屬性之前，有必要鄭重聲明一下，接下來有大量的案例，全是基于 local 本地字體做示意的，而IE7，IE8瀏覽器是不支持 local 本地字體的，所以，本文的標(biāo)題是“CSS3背景下的……”，就是這么個(gè)原因，大家注意明辨，如果你的項(xiàng)目還需要兼容IE8，本文介紹，這些好東西可能就需要斟酌斟酌了。