網頁設計中的字體應用

最近有不少人都提及了網頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發中的基本，因為目前的網頁，還是以文字訊息為主，而字體，作為文字表現形式的最重要參數之一，自然有著相當重要的地位。

Hihi, 大家好~  最近有不少人都提及了網頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發中的基本，因為目前的網頁，還是以文字訊息為主，而字體，作為文字表現形式的最重要參數之一，自然有著相當重要的地位。可惜字體的重要性在很長一段時間內並沒有得到足夠的重視。很多人對字體的概念還是停留在 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 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來使用。 ###

以上是網頁設計中的字體應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！