談談網頁設計中的字型應用Font Set_經驗交流

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

- font-family

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

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

<font face="Frankin Gothic Book">Lorem Ipsumfont>

幾乎不會有人考慮到，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 Ipsumspan>

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

• 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 Ipsumspan>

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

• 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 Ipsumspan>
<span style="font-family:sans-serif,Arial">Lorem Ipsumspan>

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

第二種寫法的錯誤在於順序。因為通用字型族應該在一個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來使用。

今天就到這裡了喲。下次我們來仔細談談通用字型族。

