網(wǎng)頁設(shè)計(jì)師應(yīng)該清楚地認(rèn)識(shí)到，字體選擇是一個(gè)常見（而且重要）的特性。畢竟，有多少頁面分布著數(shù)十個(gè)甚至數(shù)百個(gè)<FONT FACE="...">標(biāo)記呢？實(shí)際上，規(guī)范中“字體屬性”一節(jié)最開始就有這樣一句話：“設(shè)置字體屬性是樣式表的最常見用途之一?！?/p>

不過，盡管字體選擇很重要，但是目前還沒有一種辦法能確保在網(wǎng)頁上一致地使用字體，因?yàn)闆]有一種統(tǒng)一描述字體和字體的變形的方法。例如，字體Times、Times New Roman和TimesNR可能很類似，甚至完全相同，不過網(wǎng)頁瀏覽器怎么能知道這一點(diǎn)呢？網(wǎng)頁設(shè)計(jì)師可能在一個(gè)文檔中指定字體為TimesNR，但是如果用戶機(jī)器上沒有安裝這種字體，用戶查看文檔時(shí)會(huì)看到什么呢？即使安裝了Times New Roman，用戶代理也不知道這兩個(gè)字體（Times New Roman和TimesNR）實(shí)際上是可以互換的。如果你希望一個(gè)閱讀器上一定采用某種字體，請別妄想了。

盡管CSS2支持可下載字體，并定義了相應(yīng)屬性，不過這些字體在Web瀏覽器中并未得到很好的實(shí)現(xiàn)，而且出于性能方面的原因，閱讀器總會(huì)拒絕下載字體。與字處理器相比，CSS對(duì)字體并沒有提供更多的最終控制，別人加載你創(chuàng)建的一個(gè)Microsoft Office文檔時(shí)，其顯示可能取決于他已經(jīng)安裝的字體。如果他安裝的字體與你的字體不同，那么文檔看上去會(huì)大不相同。使用CSS設(shè)計(jì)的文檔也是如此。

涉及到各種繁雜的字體變形時(shí)，如粗體或斜體文本，字體命名的問題就更是混亂。大多數(shù)人都知道，斜體文本看上去很像，但是很少有人能解釋它與傾斜文本有什么區(qū)別，甚至不知道二者之間存在區(qū)別。Slanted并不是斜體風(fēng)格（italic-style）文本唯一的別名，例如，你可能還會(huì)看到oblique、incline （或inclined）、cursive和kursiv等等字眼。因此，一種字體可能有一個(gè)Tinieslulic變形，而另一種字體可能使用GeorgiaOblique作為變形。盡管這兩種字體實(shí)際上就相當(dāng)于Times和Georgia字體的“斜體形式”，但是它們的“稱呼”有很大不同。類似地，字體變形詞bold、black和heavy可能表示同一個(gè)意思，也可能不同。

CSS試圖為所有這些字體問題提供一些解決機(jī)制，不過它不能提供一個(gè)全面的解決方案。CSS字體處理中最復(fù)雜的部分是字體系列（font-family）匹配和字體加粗（font-weight）匹配，其次是字體大?。╢ont-size）計(jì)算。CSS中與字體有關(guān)的方面還包括字體風(fēng)格（如斜體）和字體變形（如小型大寫字母），相對(duì)而言，這些方面都比較直接。字體樣式的所有這些方面都集中到一個(gè)屬性，即font，本章后面將討論這個(gè)屬性。首先，先來討論字體系列，因?yàn)樵跒槲臋n選擇適當(dāng)?shù)淖煮w時(shí)這是最基本的一步。

字體系列

前面討論過，實(shí)際上相同的字體可能有很多不同的稱呼，不過CSS邁出了勇敢的一步，力圖幫助用戶代理把這種混亂狀況理清楚。畢竟，我們所認(rèn)為的“字體”可能由許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經(jīng)對(duì)字體Times很熟悉。不過，Times實(shí)際上是多種變形的一個(gè)組合，包括TimesRegular、TimesBold、 Timesltalic、TimesOblique、TimesBoldltalic, TimesBoIdOblique，等等。Times 的每種變形都是一個(gè)具體的字體風(fēng)格（font face），而我們通常認(rèn)為Times是所有這些變形字體的一個(gè)組合。換句話說，Times實(shí)際上是一個(gè)字體系列（font family），而不只是單個(gè)的字體，盡管我們大多數(shù)人都認(rèn)為字體就是某一種字體。

除了各種特定字體系列外（如Times, Verdana. Helvetica或Arial），CSS還定義了5種通用字體系列。

Serif 字體

這些字體成比例，而且有上下短線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則稱該字體是成比例的。例如，小寫i和小寫m的寬度就不同。上下短線是每個(gè)字符筆劃末端的裝飾，如小寫/頂部和底部的短線，或大寫A兩條“腿”底部的短線。serif 字體的例子包括Times' Georgia 和 New Century Schoolbook。

Sans-serif 字體

這些字體是成比例的，而且沒有上下短線。sans-serif字體的例子包括Helvetica、 Geneva、Verdana、Arial 和 Univers。

Monospace 字體

Monospace字體不是成比例的。它們通常用于模擬打字機(jī)打出的文本。老式點(diǎn)陣打印機(jī)的輸出，甚至更老式的視頰顯示終端。采用這些字體，每個(gè)字符的寬度都完全相同，所以小寫的i與小寫的m有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個(gè)字體的字符寬度完全相同，則歸類為monospace字體，而不論是否有上下短線。monospace字體的例子包括Courier、Courier New和Andale Mono。

Cursive 字體

這些字體試圖模仿人的手寫體。通常，它們主要由曲線和sedf字體中沒有的筆劃裝飾組成。例如，大寫A在其左腿底部可能有一個(gè)小彎，或者完全由花體部分和小的彎曲部分組成，cursive字體的例子包括Zapf Chancery、Author和Comic Sans。

Fantasy 字體

這些字體無法用任何特征來定義，只有一點(diǎn)是確定的，那就是我們無法很容易地將其劃歸到任何一種其他的字體系列當(dāng)中。這樣的字體包括Western、Woodblock和 Klingon。

理論上講，用戶安裝的任何字體系列都會(huì)落入到上述某種通用系列當(dāng)中。但實(shí)際上可能并非如此，不過例外情況（如果有的話）往往很少。

使用通用字體系列

可以使用屬性font-family在文檔中采用上述任何字體系列。

font-family

值：

[[<family-name>|<generic-family>]，]* [<family-name> | <generic-family>] | inherit

初始值：

用戶代理指定的值

應(yīng)用于：

所有元素

繼承性：

有

計(jì)算值：

根據(jù)指定確定

如果你希望文檔使用一種sans-serif字體，但是你并不關(guān)心是哪一種具體字體，以下就是

一個(gè)合適的聲明：

body {font-family: sans-serif;}

這樣用戶代理就會(huì)從sans-serif字體系列選擇一個(gè)字體（如Helvetica），并將其應(yīng)用到body元素。因?yàn)橛欣^承，這種字體選擇還將應(yīng)用到body元素中包含的所有元素，當(dāng)然，除非有一種更特定的選擇器將其覆蓋。只使用這些通用系列（而不做其他指定），網(wǎng)頁設(shè)計(jì)師就能創(chuàng)建相當(dāng)復(fù)雜的樣式表，以下規(guī)則的顯示見圖5-1所示：

body {font-family: serif;}

h1, h2, h3, h4 {font-family: sans-serif;}

code, pre, tt, span.input {font-family: monospace;}

p.signature {font-family: cursive;}

因此，文檔大部分會(huì)采用某種serif字體（包括大多數(shù)段落），如Times，但class為 signature的段落除外，這些段落會(huì)用一種cursive字體顯示，如Author。1~4級(jí)標(biāo)題都采用sans-serif字體，如Helvetica，而元素code、pre,tt和span,input將使用某種monospace字體，如Courier很巧合，本書中的這些元素通常也正是這樣顯示的。

指定字體系列

另一方面，創(chuàng)作人員對(duì)于文檔或元素的顯示中使用何種字體可能有一些更特定的取向。類似地，用戶也可能想創(chuàng)建一個(gè)用戶樣式表，定義所有文檔顯示中使用的具體字體。不論哪一種情況，還是要使用font-family屬性。

假設(shè)目前所有h1都應(yīng)當(dāng)使用Georgia字體。對(duì)此最簡單的規(guī)則如下：

h1 {font-family: Georgia;}

這會(huì)使顯示文檔的用戶代理對(duì)所有h1都使用Georgia字體，如圖5-2所示。

當(dāng)然，這個(gè)規(guī)則假設(shè)用戶代理上Georgia字體可用。如果Georgia字體不可用，用戶代理就根本不能使用這個(gè)規(guī)則。它不會(huì)忽略這個(gè)規(guī)則，但是如果無法找到一個(gè)名叫Georgia 的字體，它可能只能使用用戶代理的默認(rèn)字體來顯示h1元素，除此以外什么也不做。

不過，不必萬念俱灰。通過結(jié)合特定字體名和通用字體系列，可以創(chuàng)建與你預(yù)想的完全相同（或者至少很接近）的文檔。再來看前面的例子，以下標(biāo)記告訴一個(gè)用戶代理使用Georgia（如果可用），如果Georgia字體不可用，則使用另外一種serif字體。

h1 {font-family: Georgia, serif;}

如果讀者沒有安裝Georgia字體，但是安裝了Times字體，用戶代理就可能對(duì)h1元素使用Times，盡管Times與Georgia并不完全匹配，但至少足夠接近。

處于這個(gè)原因，強(qiáng)烈建議在所有font-family規(guī)則中都提供一個(gè)通用字體系列。這樣一來，就提供了一條后路，在用戶代理無法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。這種候補(bǔ)策略很有幫助，因?yàn)樵谝粋€(gè)跨平臺(tái)環(huán)境中，將無法知道誰安裝了什么字體。沒錯(cuò)，世界上所有Windows機(jī)器都可能安裝了Arial和Times New Roman 字體，但是有些Macintosh并沒有（特別是較老的機(jī)器），Unix機(jī)器可能也是如此。相反地，盡管在所有現(xiàn)代Macintosh機(jī)器上都安裝了MarkerFelt和Charcoal，但Windows 和Unix用戶不太可能安裝其中某種字體，同時(shí)安裝這兩種字體的更是少之又少。以下是另外一些例子：

h1 {font-family: Arial, sans-serif;}

h2 {font-family: Charcoal, sans-serif;}

p {font-family: TimesNR, serif;}

address {font-family: Chicago, sans-serif;}

如果你對(duì)字體很熟悉，顯示一個(gè)給定元素時(shí)可能會(huì)想到很多類似的字體。假設(shè)你希望一個(gè)文檔中的所有段落都使用Times顯示，不過也接受TimesNR、Georgia、New Century Schoolbook和New York （所有這些都是serif字體）。首先，先確定這些字體的優(yōu)先順序，然后用逗號(hào)把它們連起來：

p {font-family: Times, TimesNR,'New Century Schoolbook', Georgia,'New York'、serif;}

根據(jù)這個(gè)列表，用戶代理會(huì)按所列的順序查找這些字體。如果列出的所有字體都不可用，就會(huì)簡單地選擇一種可用的serif字體。

使用引號(hào)

你可能注意到了，前面的例子中出現(xiàn)了單引號(hào)，這在以前沒有出現(xiàn)過。只有當(dāng)一個(gè)字體名中有一個(gè)或多個(gè)空格（如New York），或者如果字體名包括#或$之類的符號(hào)，才需要在font-family聲明中加引號(hào)。在這些情況下，整個(gè)字體名應(yīng)當(dāng)用引號(hào)括起，這樣用戶代理才能搞清楚字體名到底是什么（你可能認(rèn)為有逗號(hào)就足夠了，但并非如此）。因此，名為Karrank%的字體就應(yīng)當(dāng)加引號(hào)：

h2 {font-family: Wedgie,'Karrank%', Klingon, fantasy;}

如果沒有引號(hào)，盡管規(guī)則的余下部分還會(huì)得到處理，但用戶代理有可能忽略這個(gè)特定的字體名。注意，根據(jù)CSS2.1規(guī)范，包含符號(hào)的字體名并不一定要加引號(hào)，但這是一種推薦做法，它類似于CSS規(guī)范中描述的“最佳實(shí)踐”。類似地，對(duì)包含空格的字體名也建議加引號(hào)?？梢钥吹?，唯一必須加引號(hào)的是與所接受關(guān)鍵字匹配的字體名。因此，如果需要一種名為“cursive”的字體，就必須加引號(hào)。

顯然，字體名中如果只包含一個(gè)詞，而且這個(gè)詞與font-family的任何關(guān)鍵字都不沖突，就不需要加引號(hào)，通用字體系列名（serif、monospace等等）在指示具體的通用系列時(shí)就不能加引號(hào)。如果將一個(gè)通用名用引號(hào)引起，用戶代理就會(huì)認(rèn)為你需要一個(gè)與此同名的特定字體（例如，serif），而不是一個(gè)通用字體系列。

至于使用單引號(hào)還是雙引號(hào)，這兩種都是可以接受的。要記住，如果把一個(gè)font-family 規(guī)則放在style屬性中，則需要使用該屬性本身未曾使用的那種引號(hào)。因此，如果使用雙引號(hào)將font-family規(guī)則括起，就必須在規(guī)則內(nèi)部使用單引號(hào)，如以下標(biāo)記所示：

p {font-family: sans-serif;}/* sets paragraphs to sans-serif by default */

<!-- the next example is correct (uses single-quotes)-->

<p style="font-family:'New Century Schoolbook', Times, serif;">…</p>

<!-- the next example is NOT correct (uses double-quotes)-->

<p style="font-Family:"New Century Schoolbook", Times, serif;">...</p>