Hihi, 大家好~  最近有不少人都提及了網(wǎng)頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發(fā)中的基本，因為目前的網(wǎng)頁，還是以文字信息為主，而字體，作為文字表現(xiàn)形式的最重要參數(shù)之一，自然有著相當(dāng)重要的地位。可惜字體的重要性在很長時間內(nèi)并沒有得到足夠的重視。很多人對字體的概念還是停留在 font-family: "宋體", Arial, Helvetica, serif 的階段，卻不明白為什么這樣設(shè)置，這樣設(shè)置是否合理等等?，F(xiàn)在就讓我說說字體的來龍去脈吧。

- font-family

大家知道CSS規(guī)則中定義字體是通過 font-family 這條規(guī)則來實現(xiàn)的。仔細翻翻CSS的文檔，卻沒有發(fā)現(xiàn)任何能指定某一個特定字體的規(guī)則。

想想十年前，你可以隨處看見類似于這樣的代碼：

font face="Frankin Gothic Book">Lorem Ipsum/font>

幾乎不會有人考慮到，F(xiàn)rankin Gothic Book是一個 Windows only 的字體。在一臺Mac上根本看不到Frankin Gothic Book字體的效果，系統(tǒng)因為找不到這種字體，就改用Mac的默認字體顯示了。于是，網(wǎng)頁的風(fēng)格就和原來完全不一樣了，根本達不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——將一系列近似的字體按照優(yōu)先級順序組成一個列表；瀏覽器從列表頭部開始匹配，知道找到第一個可用的字體，并使用該字體進行顯示。

比如上面這個例子，我們可以創(chuàng)建這樣的一個font set：

span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum/span>

我們來看看瀏覽器怎么來呈現(xiàn)這段文字吧：

• Windows下：瀏覽器從列表的第一個字體開始搜索——系統(tǒng)中存在Frankin Gothic Book，使用Frankin Gothic Book字體顯示。
• Mac 下：瀏覽器從列表的第一個字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個字體——Lucida Grande。系統(tǒng)中存在Lucida Grande字體，終止搜索，并用Lucida Grande字體顯示。

這樣在Mac上，Mac就能以與Frankin Gothic Book類似的Lucida Grande字體顯示這段文字。

但是可能存在一臺電腦，上面既沒有Frankin Gothic Book字體，也沒有Lucida Grande字體，那么它仍然無法正確顯示上面的這段文字。于是開發(fā)人員不得不在這個字體列表中不斷增加字體以適應(yīng)各種系統(tǒng)，導(dǎo)致這個font set失去原本的“組織近似字體”的作用。于是font set中引入了“通用字體族”，也就是我們經(jīng)常看見的 serif 和 sans-serif。我會在今后的文章中詳細的介紹這兩個，以及一些其他的通用字體族。在這里，我們可以簡單的將它們理解為一種“在所有指定字體都失效的情況下，瀏覽器指定的一種最終的代用字體”。

比如我們在改進一下上面的那段示例文字：

span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum/span>

我們再看看瀏覽器怎么來呈現(xiàn)這段改進后的文字吧：

• Windows下：瀏覽器從列表的第一個字體開始搜索——系統(tǒng)中存在Frankin Gothic Book，使用Frankin Gothic Book字體顯示。
• Mac 下：瀏覽器從列表的第一個字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個字體——Lucida Grande。系統(tǒng)中存在Lucida Grande字體，終止搜索，并用Lucida Grande字體顯示。
• 某系統(tǒng)：瀏覽器從列表的第一個字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個字體——系統(tǒng)中也不存在Lucida Grande字體。繼續(xù)搜索下一個字體——通用字體sans-serif。瀏覽器應(yīng)用它的默認sans-serif字體"Arial"來顯示這段文字。

請注意兩點。首先，通用字體族具體對應(yīng)哪個字體，是由瀏覽器決定的。上面例子中瀏覽器指定Arial為sans-serif字體，但完全有可能另一個瀏覽器指定Helvetica 為它的sans-serif字體。具體哪個字體被最終應(yīng)用，是無法預(yù)期的。其次，通用字體族只是一種在font set中其他字體都無效時的代用方案。因此——設(shè)計者應(yīng)該盡可能的給出齊全的font set，以盡可能的覆蓋所有的系統(tǒng)，而不應(yīng)該依賴于通用字體族。

類似于以下的兩種寫法都是錯誤的：

span style="font-family:sans-serif">Lorem Ipsum/span>
span style="font-family:sans-serif,Arial">Lorem Ipsum/span>

第一種寫法的錯誤在于——它相當(dāng)于根本沒有指定字體，仍舊是交由瀏覽器選擇字體。寫了相當(dāng)于沒寫。

第二種寫法的錯誤在于順序。因為通用字體族應(yīng)該在一個font set中其它所有字體都失效時才起作用。因此，將指定字體放在通用字體之后，會造成制定字體尚未匹配時就使用了通用字體。所以，你應(yīng)該務(wù)必使通用字體處在font set中的最后一位。

另外，這里要說明兩件事情。

首先，瀏覽器應(yīng)用font set中哪個字體的規(guī)則雖然看上去很簡單，但其實非常trickish。我會在以后的文章中做出具體的說明。

其次，雖然字體的CSS規(guī)則名稱叫font-family, 但它的實質(zhì)是一個font set，而不等是印刷意義上的font family。印刷上的font family 是指一系列相同字樣的不同強度組合，比如Lucida Family（包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等）和Arial Family（Arial, Arial Black, Arial Rounded MT等等），但顯然這些font family 都不適合直接拿來當(dāng)作一個font set來使用。

今天就到這里了喲。下次我們來仔細談?wù)勍ㄓ米煮w族。