很多人只要一提到 @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

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 個屬性給我感覺更像是專為英文設計的，所以如果不是有業務需要，可以先放一放。

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

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

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