歡迎光臨
每天分享高質量文章

談談網頁設計中的字體應用(1):Font Set

Hihi, 大家好~

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

– font-family

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

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

Lorem Ipsum

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

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

Lorem Ipsum

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

  • 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。我會在今後的文章中詳細的介紹這兩個,以及一些其他的通用字體族。在這裡,我們可以簡單的將它們理解為一種“在所有指定字體都失效的情況下,瀏覽器指定的一種最終的代用字體”。

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

Lorem Ipsum

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

  • 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,以盡可能的改寫所有的系統,而不應該依賴於通用字體族。

類似於以下的兩種寫法都是錯誤的:

Lorem Ipsum

Lorem Ipsum

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

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

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


來自:棕熊的博客

鏈接:http://www.cnblogs.com/ruxpinsp1/archive/2008/04/29/font-in-front-end-development-1.html



赞(0)

分享創造快樂