Hihi, 大家好~ 最近有不少人都提及了網(wǎng)頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發(fā)中的基本，因?yàn)槟壳暗木W(wǎng)頁，還是以文字信息為主，而字體，作為文字表現(xiàn)形式的最重要參數(shù)之一，自然有著相當(dāng)重要的地位?？上ё煮w的重要性在很長(zhǎng)時(shí)間內(nèi)并沒有得到足夠的重視。很多人對(duì)字體的概念還是停留在 font-family: "宋體", Arial, Helvetica, serif 的階段，卻不明白為什么這樣設(shè)置，這樣設(shè)置是否合理等等?，F(xiàn)在就讓我說說字體的來龍去脈吧。
- font-family
大家知道CSS規(guī)則中定義字體是通過 font-family 這條規(guī)則來實(shí)現(xiàn)的。仔細(xì)翻翻CSS的文檔，卻沒有發(fā)現(xiàn)任何能指定某一個(gè)特定字體的規(guī)則。
想想十年前，你可以隨處看見類似于這樣的代碼：
font face="Frankin Gothic Book">Lorem Ipsum/font>
幾乎不會(huì)有人考慮到，F(xiàn)rankin Gothic Book是一個(gè) Windows only 的字體。在一臺(tái)Mac上根本看不到Frankin Gothic Book字體的效果，系統(tǒng)因?yàn)檎也坏竭@種字體，就改用Mac的默認(rèn)字體顯示了。于是，網(wǎng)頁的風(fēng)格就和原來完全不一樣了，根本達(dá)不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——將一系列近似的字體按照優(yōu)先級(jí)順序組成一個(gè)列表；瀏覽器從列表頭部開始匹配，知道找到第一個(gè)可用的字體，并使用該字體進(jìn)行顯示。
比如上面這個(gè)例子，我們可以創(chuàng)建這樣的一個(gè)font set：
span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum/span>
- 我們來看看瀏覽器怎么來呈現(xiàn)這段文字吧：
-
- Windows下：瀏覽器從列表的第一個(gè)字體開始搜索——系統(tǒng)中存在Frankin Gothic Book，使用Frankin Gothic Book字體顯示。
- Mac 下：瀏覽器從列表的第一個(gè)字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個(gè)字體——Lucida Grande。系統(tǒng)中存在Lucida Grande字體，終止搜索，并用Lucida Grande字體顯示。
這樣在Mac上，Mac就能以與Frankin Gothic Book類似的Lucida Grande字體顯示這段文字。
但是可能存在一臺(tái)電腦，上面既沒有Frankin Gothic Book字體，也沒有Lucida Grande字體，那么它仍然無法正確顯示上面的這段文字。于是開發(fā)人員不得不在這個(gè)字體列表中不斷增加字體以適應(yīng)各種系統(tǒng)，導(dǎo)致這個(gè)font set失去原本的“組織近似字體”的作用。于是font set中引入了“通用字體族”，也就是我們經(jīng)?？匆姷?serif 和 sans-serif。我會(huì)在今后的文章中詳細(xì)的介紹這兩個(gè)，以及一些其他的通用字體族。在這里，我們可以簡(jiǎn)單的將它們理解為一種“在所有指定字體都失效的情況下，瀏覽器指定的一種最終的代用字體”。
比如我們?cè)诟倪M(jìn)一下上面的那段示例文字：
span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum/span>
- 我們?cè)倏纯礊g覽器怎么來呈現(xiàn)這段改進(jìn)后的文字吧：
-
- Windows下：瀏覽器從列表的第一個(gè)字體開始搜索——系統(tǒng)中存在Frankin Gothic Book，使用Frankin Gothic Book字體顯示。
- Mac 下：瀏覽器從列表的第一個(gè)字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個(gè)字體——Lucida Grande。系統(tǒng)中存在Lucida Grande字體，終止搜索，并用Lucida Grande字體顯示。
- 某系統(tǒng)：瀏覽器從列表的第一個(gè)字體開始搜索——系統(tǒng)中不存在Frankin Gothic Book，搜索失敗。繼續(xù)搜索下一個(gè)字體——系統(tǒng)中也不存在Lucida Grande字體。繼續(xù)搜索下一個(gè)字體——通用字體sans-serif。瀏覽器應(yīng)用它的默認(rèn)sans-serif字體"Arial"來顯示這段文字。
請(qǐng)注意兩點(diǎn)。首先，通用字體族具體對(duì)應(yīng)哪個(gè)字體，是由瀏覽器決定的。上面例子中瀏覽器指定Arial為sans-serif字體，但完全有可能另一個(gè)瀏覽器指定Helvetica 為它的sans-serif字體。具體哪個(gè)字體被最終應(yīng)用，是無法預(yù)期的。其次，通用字體族只是一種在font set中其他字體都無效時(shí)的代用方案。因此——設(shè)計(jì)者應(yīng)該盡可能的給出齊全的font set，以盡可能的覆蓋所有的系統(tǒng)，而不應(yīng)該依賴于通用字體族。
類似于以下的兩種寫法都是錯(cuò)誤的：
span style="font-family:sans-serif">Lorem Ipsum/span>
span style="font-family:sans-serif,Arial">Lorem Ipsum/span>
第一種寫法的錯(cuò)誤在于——它相當(dāng)于根本沒有指定字體，仍舊是交由瀏覽器選擇字體。寫了相當(dāng)于沒寫。
第二種寫法的錯(cuò)誤在于順序。因?yàn)橥ㄓ米煮w族應(yīng)該在一個(gè)font set中其它所有字體都失效時(shí)才起作用。因此，將指定字體放在通用字體之后，會(huì)造成制定字體尚未匹配時(shí)就使用了通用字體。所以，你應(yīng)該務(wù)必使通用字體處在font set中的最后一位。
另外，這里要說明兩件事情。
首先，瀏覽器應(yīng)用font set中哪個(gè)字體的規(guī)則雖然看上去很簡(jiǎn)單，但其實(shí)非常trickish。我會(huì)在以后的文章中做出具體的說明。
其次，雖然字體的CSS規(guī)則名稱叫font-family, 但它的實(shí)質(zhì)是一個(gè)font set，而不等是印刷意義上的font family。印刷上的font family 是指一系列相同字樣的不同強(qiáng)度組合，比如Lucida Family（包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等）和Arial Family（Arial, Arial Black, Arial Rounded MT等等），但顯然這些font family 都不適合直接拿來當(dāng)作一個(gè)font set來使用。
今天就到這里了喲。下次我們來仔細(xì)談?wù)勍ㄓ米煮w族。
