CSS必知必會集錦（四）：字型和文字

編者注：本集錦摘編自圖靈新書《CSS設計師指南（第3版）》第4章“字型和文字”，是作者從相關主題中提煉出來的短小精悍的提示和法則。其中，既包含業界公認的CSS最佳實踐，又不乏作者獨到的一家之言，還有很多有價值的參考資料。理解這些CSS知識點，對夯實基礎，開闊視野是至關重要的。

據測試，font-family的值（字型名）不區分大小寫。但是，你可不能修改Google或其他線上字型庫生成的字型名，否則很可能無法使用它們提供的定製字型。

如果字型名像Trebuchet MS一樣多於一個單詞（有空格），應該加上引號。

“x高度”指英文字母不包含（字母d和p都有的）上伸部分和下伸部分的主要區域，恰好x沒有這些部分，所以就用它的高度來度量。

關於如何選擇字型，大家有空看看這篇文章：http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/。

哪些字型是在所有瀏覽器中都能用的？

這個問題很多人都會問，但卻沒有肯定的答案。不過，從概率的角度看，以下字型是Mac和PC中安裝率最高的。

隨著手機和平板電腦的普及， 字型可用性越來越難以預測。因此，在字型棧中指定通用字型族也變得越來越重要。如果你想設定一種自己Web伺服器上的特殊字型，讓使用者可以隨頁面下載它，可以參考本章4.3節“Web字型大揭祕”。

設定絕對字型大小時，也可以使用關鍵字值，比如x-small、medium、x-large，等等。其中，medium等於基準大小，其他關鍵字要麼小一點，要麼大一點。關鍵字值涵蓋的範圍太窄，所以使用不廣泛，如果你感興趣，可以看看這篇文章：http://css-discuss.incutio.com/wiki/Using_Keywords（注意大小寫）。

如果你想使用em，但又需要設定具體的畫素大小，可以把body的font-size設定為62.5%。這樣，就等於把基準大小從16畫素改為10畫素（16×62.5%=10）。然後，em與畫素的對應關係就十分明確了，比如1em等於10畫素，1.5em等於15畫素，2em等於20畫素，等等。

在使用者使用“檢視 > 文字大小”選單調整網頁文字大小的時候，IE9及更早版本只能縮放以相對單位設定的文字（使用畫素之類的絕對單位設定的文字無法縮放）。換句話說，使用rem單位在IE7和IE6中存在一個小小的副作用，那就是這些瀏覽器的使用者必須使用“檢視 > 縮放”來調整整個頁面的大小。當然，這也算一個應該升級到現代瀏覽器的原因吧。

實際上，在設定font-size屬性的同時，可以順便設定line-height（行高）值。也就是說，字型大小和行高的值可以寫在一塊，比如12px/1.5。當然，line-height是文字屬性，下一節我們會講到它。

必須注意，上網的人都習慣了把帶下劃線的文字當成連結。如果你給本來不是連結的文字加上下劃線，很容易導致困惑和無效點選。

相信不少讀者是頭一次聽說“空鉛”這個術語，怎麼會有這種叫法呢？在鉛活字印刷時代，兩行字模之間的空白區域是通過向其中加入細鉛條實現的。

Web專家Paul Irish寫過一個跨瀏覽器@font-face的“笑臉版”，可以保證使用者機器中萬一安裝了同名字型時不會混淆，詳細內容請參考這篇文章：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/。

如果想深入理解@font-face規則，建議讀一讀Tim Brown的部落格文章“How to use @font-face”：http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/。

值為1.0em的font-size只是顯式地宣告瞭預設字型大小，並沒有修改什麼。但為了將來修改頁面中所有文字的字型更方便，必須在font快捷屬性中同時設定字型大小，而且要使用相對單位em。

HTML實體引用

以下網站中列出了HTML實體：

• http://htmlhelp.com/reference/html40/entities/special.html；
• http://code.stephenmorley.org/html-and-css/character-entity-references-cheat-sheet。

上面第一個連結中既包含HTML實體值，也包含實體需要作為::before和::after偽元素內容時的十六進位制值。舉個例子，如果你想在偽元素中新增十六進位制值“（左雙引號），則需要改寫成如下所示：

e::before {content:"\201C";}

就是在數字前面加了一個反斜槓。相應地，右雙引號的十六進位制值改寫後是\201D。

在HTML標記中，必須把所有和號（&）和小於號（<）都替換成相應的HTML實體，也就是&和<。因為“&”是實體的第一個字元，而“<”是HTML標籤的第一個字元，它們都有特殊含義。如果不替換的話，瀏覽器一看到它們就會當成實體和標籤來解釋後面的內容。

排版資源

http://ilovetypography.com 在這個網站上，你可以跟著設計師John Boardley一起深思，欣賞每一頁中別具一格的排版。

http://www.thinkingwithtype.com 這是Thinking with Type一書的網站，作者Ellen Lupton。網站中展示了很多漂亮又經典的版式，還包含一些字型及字型族的資訊。

http://webtypography.net 這個站點自稱為The Elements of Typographic Style Applied to the Web—A practical guide to web typography。跟隨網站的目錄，可以找到各種常用的排版知識和技巧。