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

- font-family

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

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

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

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

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

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

我們來看看瀏覽器怎么來呈現這段文字吧：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

其次，雖然字體的CSS規則名稱叫font-family, 但它的實質是一個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 都不適合直接拿來當作一個font set來使用。