關於CSS3的@font face規則的解析

這篇文章主要介紹了真正瞭解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-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 ，好像就是專門過來打醬油的。實際上，這裡的每個屬性都不是泛泛之輩，都是有故事的人。

在介紹每個屬性之前，有必要鄭重聲明一下，接下來有大量的案例，全是基於 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;}

多麼乾淨，多麼清爽，心情多麼舒暢！

src 還支援多個 local 字型地址同時出現，嘿，這簡化的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;}

雖然說，實現的時候，藉助了Sass, Less之類工具讓字型名稱們成為了變數，寫代碼的時候好像也沒怎麼吃力，但是最終產生的CSS其實是比較囉嗦，如果我們走本質上就是變數的 @font face ，是不是不僅開發簡單，代碼也簡單了，如下處理：

@font-face {  font-family: BASE;  src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);}

於是我們用字型的時候直接：

body {    font-family: BASE;}.xxxx {    font-family: BASE;}

看語義又好，代碼又簡單，實用又方便，超級使用的小技巧。

當然， local 本地作用還不止這些。

業界有個名為“ 字蛛 ”的中文字型處理工具，可以提取頁面中使用的特殊中文字型並產生新的體積更小的自訂字型。我們可以在這個基礎上更進一步，舉個例子：

一些特殊的標題設計師就是喜歡用“方正粗雅宋”這個字型（已經購得著作權），但是很顯然，這麼帥氣的字型，幾乎很少有使用者安裝的，所以實際開發的時候，全都是通過工具而產生一個全新的精簡版的“方正粗雅宋”字型檔，再通過 src 屬性 url() 方法外鏈這個字型檔。

很棒的方案，但還不夠完美，為什麼呢？雖然安裝“方正粗雅宋”這個字型的使用者並不多，但並不表示沒有使用者使用之。試想一下，假如有使用者安裝了這個字型，結果你在網頁呈現的時候，還要再去外鏈一個額外的檔案地址，豈不是白白的浪費？既浪費流量，體驗又不一定好，如果字型檔載入慢，會看到文字“變形”的過程，顯然是不友好的。

我們可以藉助 @font face 規則中的 local 實現代碼和體驗上的進一步的提升，如下：

@font-face {  font-family: FZCYS;  src: local("FZYaSongS-B-GB"),        url("FZCYS.woff2"),         url("FZCYS.woff"),       url("FZCYS.ttf");}

於是乎，那些安裝了“方正粗雅宋”這個字型的使用者，就沒有任何字型檔請求。載入更快了，使用者體驗上升了，還省了流量，如此百益無一害的事情，還不妥妥的用起來。

font-style

在Chrome瀏覽器下， @font face 規則設定 font-style:italic 可以讓文字傾斜，但是這並不是其作用所在。

@font face 規則中的 font-style 和 font-weight 類似，都是用來設定對應字型樣式或自重下該使用什麼字型。因為有些字型可能會有專門的斜體字，注意這個斜體字，並不是讓文字的形狀傾斜，而是專門設計的傾斜的字型，很多細節會跟物理上的請求不一樣。於是，我在CSS代碼中使用 font-style:italic 的時候，就會調用這個對應字型，如下示意：

@font-face {  font-family: 'I';  font-style: normal;  src: local('FZYaoti');}@font-face {  font-family: 'I';  font-style: italic;  src: local('FZShuTi');}

由於專門的斜體字不太好找，所以我使用“方正姚體”和“方正舒體”代替做示意。上面CSS代碼我解讀一下：制定一個字型，名叫 'I' ，當文字樣式正常的時候，字型表現使用“方正姚體”，當文字設定了 font-style:italic 的時候，字型表現為“方正舒體”。

好，現在假設有下面這樣的CSS和HTML：

.i {  font-family: I;}

<p><i class="i">類名是i，標籤是i</i></p><p><span class="i">類名是i, 標籤是span</span></p>

請問最終的表現是怎樣的？

由於 <i> 標籤天然 font-style:italic ，因此理論上，上面一行文字表現為“方正舒體”，下面一行為“方正姚體”，最終結果是如何呢？

噹噹噹噹，完全符合，如下：

這下大家應該明白， @font face 規則中的 font-style 是幹嘛用的了吧。

font-weight

font-weight 和 font-style 類似，不過是定義了不同字重使用不同字型，對於中午而言，這個要比 font-style 適用性強很多。我這裡就有一個非常具有代表性的例子，著作權字型“漢儀旗黑”自重非常豐富，但是這個字型不像“思源黑體”，天然可以根據 font-weight 屬性值載入對應的字型檔，怎麼辦呢？很簡單，使用 @font face規則重新定義一下即可，例如下面的CSS代碼：

@font-face {  font-family: 'QH';  font-weight: 400;  src: local('HYQihei 40S');}@font-face {  font-family: 'QH';  font-weight: 500;  src: local('HYQihei 50S');}@font-face {  font-family: 'QH';  font-weight: 600;  src: local('HYQihei 60S');}

解讀一下就是，是一個全新的字型，名為 'QH' ，當字重 font-weight 為 400 的時候，使用“漢儀旗黑 40S”字重字型，為 500 的時候，使用“漢儀旗黑 50S”字重字型，為 600 的時候，使用“漢儀旗黑 60S”字重字型。

於是乎，當我們應用如下的CSS和HTML代碼的時候：

.hy-40s,.hy-50s,.hy-60s {  font-family: 'QH';}.hy-40s {  font-weight: 400;}.hy-50s {  font-weight: 500;}.hy-60s {  font-weight: 600;}

<ul>  <li class="hy-40s">漢儀旗黑40s</li>  <li class="hy-50s">漢儀旗黑50s</li>  <li class="hy-60s">漢儀旗黑60s</li></ul>

我們就可以看到，文字粗細錯落有致的效果，如下：

如果用在網頁開發中，必定會讓我們的介面更加的細膩，設計更加的精緻，視覺更加的愉悅。

unicode-range

unicode-range 的作用是可以讓特定的字元或者字元片段使用特定的字型。舉個例子，是文字應用了“微軟雅黑”字型後的效果：

但是，這兩個“引號”左右間隙不均，方向不明，實在是看著不爽，此時我們就專門指定這兩個“引號”使用其他字型，如下CSS：

@font-face {  font-family: BASE;  src: local("Microsoft Yahei");}@font-face {  font-family: quote;  src: local('SimSun');      unicode-range: U+201c, U+201d;}.font {    font-family: quote, BASE;}

然後效果就變成這樣子了：

嗯，一下子變得舒服多了。

三、結束語

根據我個人的感覺， @font-face 的為人所知要得益於icon fonts小表徵圖技術。因為自訂的小表徵圖字型幾乎一定是外鏈的，而恰恰好，低版本IE7，IE8瀏覽器的 src 只能是 url() 外部字型檔。外加向量、顏色可控等特性，於是成為了相容時代最好的小表徵圖解決方案，可謂功不可沒，但也帶來了另外一個弊端，讓很多同學誤以為 @font-face 除了自訂一些小表徵圖之外就一無是處了。於是，當越來越多產品和項目不需要相容IE7，IE8瀏覽器的時候，由於有更好的SVG表徵圖解決方案， @font-face 似乎又很少被提及了。

通過本文的一些介紹，大家應該感覺到 @font-face 規則的作用被嚴重低估了，除了小表徵圖外， @font-face 還能做的事情非常多，而這些事情，才更像是 @font-face 應該做的事情。

就算你的項目需要相容IE8，本文介紹的一些特性也是可以漸進增強使用的，例如特殊中文字型優先使用本地字型，或者 unicode-range 特定字元使用特定字型等。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！