網(wǎng)頁(yè)設(shè)計(jì)中的 serif 和 sans-serif字體區(qū)別和應(yīng)用

- serif

Serif 在印刷學(xué)上指襯線字體。為了理解襯線字體的概念，大家先看幾個(gè)典型的襯線字體的例子：

My 
Georgia字體King 
Times New Roman 字體漢字 
宋體

單詞 My 中的字母 “M”上下方突出的短橫線就是所謂的襯線。同樣，y的上方，K的上下，i 和n的下方也都有襯線，所以這些字體都被稱為襯線字體。但襯線字體并不一定都有襯線，比如上面例子中的g, “漢”和“字”。事實(shí)上，只要滿足末端加強(qiáng)原則的字體都是襯線字體。所謂的末端加強(qiáng)，就是使用襯線或粗細(xì)變化，使字體筆畫的末端得到加強(qiáng)，以改善小號(hào)文字的可讀性。比如上面例子中的y的下半部分，還有宋體的中文字符，都是采取加粗筆劃的末端來(lái)達(dá)到末端加強(qiáng)的效果。除此之外，很多襯線字體還會(huì)采用加強(qiáng)豎向筆劃（比如宋體中豎比橫粗），夸張字形（最明顯的就是小寫g這個(gè)字符了）等方法進(jìn)一步改善它的可讀性。

因?yàn)橐r線字體的可讀性非常好，所以它應(yīng)用的最多的地方也正是出版物或者印刷品的正文內(nèi)容等以大段文字作為表現(xiàn)形式的作品上。

比較常見的襯線字體有 Georgia, Garamond, Times New Roman, 中文的宋體等等。

- sans-serif

襯線字體以外的一切字體都是無(wú)襯線字體。sans- 這個(gè)前綴其實(shí)是法語(yǔ)，所以比較標(biāo)準(zhǔn)的發(fā)音是 /san/ 而不是 /sans/。它的意思是“沒(méi)有”。所以sans-serif就是無(wú)襯線字體。

Gut  
Verdana 字體Might  
Arial 字體書寫  
幼圓

無(wú)襯線字體比較圓滑，線條一般粗細(xì)均勻。比較適合用作藝術(shù)字、標(biāo)題等。因?yàn)闊o(wú)襯線字體通常粗細(xì)比較均勻，所以在小字體顯示的時(shí)候，可讀性會(huì)降低，容易引起視覺(jué)疲勞。

常見的無(wú)i襯線字體有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。

- 什么時(shí)候用serif？什么時(shí)候用sans-serif？

從上面的介紹中，我們可以知道，襯線字體之所以被設(shè)計(jì)出來(lái)，就是為了用作正文內(nèi)容的。大家可以隨手抄起一張報(bào)紙，看看上面的文章是不是宋體。如果手頭有外語(yǔ)讀物的話，也可以翻來(lái)看一下，正文都是襯線字體。同樣大小的襯線字體比無(wú)襯線字體容易閱讀：

然后大家可以把報(bào)紙翻到頭版頭條——標(biāo)題一般都會(huì)是各種粗細(xì)一致的綜藝體或者是中黑體。英文報(bào)紙的標(biāo)題大多也是無(wú)襯線的。這個(gè)就是應(yīng)用他們的基本原則。

但是大家可以看很多網(wǎng)站——它們的正文內(nèi)容恰恰是無(wú)襯線的Tahoma, Verdana, Arial等等。中文網(wǎng)站可能因?yàn)樽煮w的局限性，仍舊使用宋體居多，但查看它們的樣式表，就會(huì)發(fā)現(xiàn)候補(bǔ)字體也大多是無(wú)襯線的。這樣是不是不好呢？

當(dāng)然不是。

襯線字體的可讀性其實(shí)僅僅體現(xiàn)在小字體上。大家可以拿出剛剛抄起來(lái)的報(bào)紙，和你顯示器上的文字比較一下——你會(huì)發(fā)現(xiàn)，報(bào)紙上的文字比顯示器上的文字整整小一圈。實(shí)際上，新明晚報(bào)上通常大小的宋體文字，在點(diǎn)距為0.25mm的高質(zhì)量液晶顯示器上，大小大約只相當(dāng)于10px ~ 11px的顯示字符；在普通的液晶顯示器（點(diǎn)距一般為0.28mm）上，甚至可能只相當(dāng)于8px~10px的顯示字符。

這個(gè)就是 print media 和 screen media 的最大區(qū)別。印刷業(yè)為了節(jié)約成本，因此會(huì)盡可能的在保證可讀的情況下，把文字印小。顯示器不存在這樣的成本，因此可以顯示比較大的文字。在文字足夠大的情況下，無(wú)襯線字體也是同樣可讀的。而且因?yàn)闊o(wú)襯線字體通常有藝術(shù)性，因此在顯示器上顯示通常比較賞心悅目；而且無(wú)襯線字體種類比襯線字體多得多，因此選擇余地也很大。所以大家盡可以放心去使用。但是必須保證以下原則：凡是使用無(wú)襯線字體的，必須保證其在正文內(nèi)容中的可讀性。否則，使用襯線字體。換而言之，如果你要使用無(wú)襯線字體顯示網(wǎng)頁(yè)的正文內(nèi)容，那么，你必須把它的font-size設(shè)的足夠大，以保證用戶能輕易閱讀。

至于具體將font-size 設(shè)多大，是因字體而異的。12px 對(duì)于 Verdana 來(lái)說(shuō)已經(jīng)完全足夠，但是要能輕易的閱讀隸書，可能需要24px以上才行。

對(duì)于11px以下的英文字體，推薦使用襯線字體。至于中文，因?yàn)轱@示器的硬件限制，不論是什么字體，都不推薦使用11px以下的font-size來(lái)顯示。

- 其他的通用字體族

印刷學(xué)中，除了serif 和 sans-serif 之外，通常還有 monospace 等寬字體、scripts 手寫體（比如花體）、blackletter 鉛字體（也叫 gothic 哥特體。嚴(yán)格的說(shuō)，很多常用的serif字體其實(shí)是gothic字體）、ornamental 裝飾體（那些在文字筆劃上或者周圍有裝飾花紋的字體。很多中世紀(jì)書籍上很常見。如果腦殘?bào)w真的成了字體，那么應(yīng)該可以算裝飾體吧……）和 symbol 符號(hào)字體（比如有名的wedding123……）。

不過(guò)CSS對(duì)通用字體族的定義有點(diǎn)不一樣。除了serif 和 sans-serif 之外，CSS還允許以下幾個(gè)通用字體族：

• monospace 等寬字體

  所謂的等寬字體，是指每個(gè)字符寬度都一致的字體。一個(gè)著名的例子就是 Courier New 字體。因?yàn)樽址麑挾纫恢?，所以特別容易對(duì)齊，能快速精確的定位到某行某列，因此經(jīng)常用來(lái)顯示代碼。

  要注意的是，一個(gè)等寬字體同時(shí)也可以是一個(gè)襯線（或者非襯線）字體。比如 Courier New 這個(gè)字體也可以看作是一個(gè)serif（嚴(yán)格的說(shuō)是gothic）字體。

• cursive 書寫體：相當(dāng)于印刷學(xué)中的手寫體。中文的華文行草就是這樣的一個(gè)字體。
• fantasy 夢(mèng)幻體：相當(dāng)于印刷學(xué)中的裝飾體。非常少見的一種字體，基本沒(méi)有參考價(jià)值。

要注意的是，CSS中不支持symbol字體族。使用symbol類的字體請(qǐng)用圖片。

- 一些你不知道的事情

• 中文的黑體其實(shí)是襯線字體。大家可以看下面的圖：

  

  大家可以看到，其實(shí)黑體的確是經(jīng)過(guò)末端加強(qiáng)的，所以很多印刷品的正文也會(huì)使用黑體。像這種使用溫和的末端加強(qiáng)，筆劃粗細(xì)大致一致的字體，其實(shí)也可以被稱為petit-serif/小襯線體。（那些類似于宋體一樣有顯著末端加強(qiáng)，并且筆劃粗細(xì)有明顯區(qū)別的，通常稱為slab-serif/雕版襯線體）

  只是很遺憾，因?yàn)橹T多的硬件原因，在顯示器上實(shí)際顯示黑體時(shí)，大家還是可以把它看作一個(gè)無(wú)襯線字體 

• Italic 不是斜體

  斜體是oblique。Italic 顧名思義，是意大利體。Italic 是一種書寫方式（calligraphy script），而oblique 是一種印刷樣式，兩者是不同的東西。中學(xué)英語(yǔ)習(xí)字冊(cè)交授的書寫方式就是意大利體。除了意大利體外，比較流行的書寫方式還有法蘭西體（就是傳說(shuō)中的花體字，正名是French Script）、哥特體、亞伯拉罕體等等。

  很多考究的字體都會(huì)為意大利體定制一套特殊的字體，而不是簡(jiǎn)單的顯示成斜體。比如下面的圖片里，三行文字都是Georgia字體。第一行普通；第二行是oblique，也就是斜體；第三行才是真正的italic意大利體。

  

  大家仔細(xì)看第三行的a, l, i, e 等字母——很明顯的看出區(qū)別了吧。實(shí)際上，Georgia Italic 和 Georgia 在系統(tǒng)內(nèi)是兩個(gè)不同的字體文件。當(dāng)我們指定 font-style: italic 的時(shí)候，系統(tǒng)就會(huì)自動(dòng)搜尋是不是存在Georgia Italic這個(gè)字體，并嘗試使用這個(gè)字體來(lái)顯示文字內(nèi)容。

  按理說(shuō)當(dāng)我們用 font-style: oblique 指定字體樣式時(shí)，瀏覽器不應(yīng)該去尋找Georgia Italic這個(gè)字體，而直接將Georgia字體傾斜顯示，所以理論上應(yīng)該得到圖中第二行文字的效果?？上ВBW3C在CSS規(guī)范中，自己的參考實(shí)現(xiàn)也說(shuō)是“如果UA不能正確顯示italic 和oblique, 可以使用italic來(lái)代替oblique顯示”，所以幾乎沒(méi)有瀏覽器實(shí)現(xiàn)區(qū)分italic 和oblique。哪怕你設(shè)置的font-style是oblique, 你也會(huì)發(fā)現(xiàn)，瀏覽器顯示的也還是italic

今天就到這里了。下一講我會(huì)談?wù)勅绾螛?gòu)建一個(gè)合理的font-family，并推薦幾個(gè)使用的字體組合給大家。那么，再見了喲~