網(wǎng)頁設(shè)計師應(yīng)該清楚地認識到，字體選擇是一個常見（而且重要）的特性。畢竟，有多少頁面分布著數(shù)十個甚至數(shù)百個<FONT FACE="...">標記呢？實際上，規(guī)范中“字體屬性”一節(jié)最開始就有這樣一句話：“設(shè)置字體屬性是樣式表的最常見用途之一?！?/p>
不過，盡管字體選擇很重要，但是目前還沒有一種辦法能確保在網(wǎng)頁上一致地使用字體，因為沒有一種統(tǒng)一描述字體和字體的變形的方法。例如，字體Times、Times New Roman和TimesNR可能很類似，甚至完全相同，不過網(wǎng)頁瀏覽器怎么能知道這一點呢？網(wǎng)頁設(shè)計師可能在一個文檔中指定字體為TimesNR，但是如果用戶機器上沒有安裝這種字體，用戶查看文檔時會看到什么呢？即使安裝了Times New Roman，用戶代理也不知道這兩個字體（Times New Roman和TimesNR）實際上是可以互換的。如果你希望一個閱讀器上一定采用某種字體，請別妄想了。
盡管CSS2支持可下載字體，并定義了相應(yīng)屬性，不過這些字體在Web瀏覽器中并未得到很好的實現(xiàn)，而且出于性能方面的原因，閱讀器總會拒絕下載字體。與字處理器相比，CSS對字體并沒有提供更多的最終控制，別人加載你創(chuàng)建的一個Microsoft Office文檔時，其顯示可能取決于他已經(jīng)安裝的字體。如果他安裝的字體與你的字體不同，那么文檔看上去會大不相同。使用CSS設(shè)計的文檔也是如此。
涉及到各種繁雜的字體變形時，如粗體或斜體文本，字體命名的問題就更是混亂。大多數(shù)人都知道，斜體文本看上去很像，但是很少有人能解釋它與傾斜文本有什么區(qū)別，甚至不知道二者之間存在區(qū)別。Slanted并不是斜體風格（italic-style）文本唯一的別名，例如，你可能還會看到oblique、incline （或inclined）、cursive和kursiv等等字眼。因此，一種字體可能有一個Tinieslulic變形，而另一種字體可能使用GeorgiaOblique作為變形。盡管這兩種字體實際上就相當于Times和Georgia字體的“斜體形式”，但是它們的“稱呼”有很大不同。類似地，字體變形詞bold、black和heavy可能表示同一個意思，也可能不同。
CSS試圖為所有這些字體問題提供一些解決機制，不過它不能提供一個全面的解決方案。CSS字體處理中最復雜的部分是字體系列（font-family）匹配和字體加粗（font-weight）匹配，其次是字體大?。╢ont-size）計算。CSS中與字體有關(guān)的方面還包括字體風格（如斜體）和字體變形（如小型大寫字母），相對而言，這些方面都比較直接。字體樣式的所有這些方面都集中到一個屬性，即font，本章后面將討論這個屬性。首先，先來討論字體系列，因為在為文檔選擇適當?shù)淖煮w時這是最基本的一步。
前面討論過，實際上相同的字體可能有很多不同的稱呼，不過CSS邁出了勇敢的一步，力圖幫助用戶代理把這種混亂狀況理清楚。畢竟，我們所認為的“字體”可能由許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經(jīng)對字體Times很熟悉。不過，Times實際上是多種變形的一個組合，包括TimesRegular、TimesBold、 Timesltalic、TimesOblique、TimesBoldltalic, TimesBoIdOblique，等等。Times 的每種變形都是一個具體的字體風格（font face），而我們通常認為Times是所有這些變形字體的一個組合。換句話說，Times實際上是一個字體系列（font family），而不只是單個的字體，盡管我們大多數(shù)人都認為字體就是某一種字體。
除了各種特定字體系列外（如Times, Verdana. Helvetica或Arial），CSS還定義了5種通用字體系列。
Serif 字體
這些字體成比例，而且有上下短線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則稱該字體是成比例的。例如，小寫i和小寫m的寬度就不同。上下短線是每個字符筆劃末端的裝飾，如小寫/頂部和底部的短線，或大寫A兩條“腿”底部的短線。serif 字體的例子包括Times' Georgia 和 New Century Schoolbook。
Sans-serif 字體
這些字體是成比例的，而且沒有上下短線。sans-serif字體的例子包括Helvetica、 Geneva、Verdana、Arial 和 Univers。
Monospace 字體
Monospace字體不是成比例的。它們通常用于模擬打字機打出的文本。老式點陣打印機的輸出，甚至更老式的視頰顯示終端。采用這些字體，每個字符的寬度都完全相同，所以小寫的i與小寫的m有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為monospace字體，而不論是否有上下短線。monospace字體的例子包括Courier、Courier New和Andale Mono。
Cursive 字體
這些字體試圖模仿人的手寫體。通常，它們主要由曲線和sedf字體中沒有的筆劃裝飾組成。例如，大寫A在其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成，cursive字體的例子包括Zapf Chancery、Author和Comic Sans。
Fantasy 字體
這些字體無法用任何特征來定義，只有一點是確定的，那就是我們無法很容易地將其劃歸到任何一種其他的字體系列當中。這樣的字體包括Western、Woodblock和 Klingon。
理論上講，用戶安裝的任何字體系列都會落入到上述某種通用系列當中。但實際上可能并非如此，不過例外情況（如果有的話）往往很少。
使用通用字體系列
可以使用屬性font-family在文檔中采用上述任何字體系列。
font-family
值：
[[<family-name>|<generic-family>]，]* [<family-name> | <generic-family>] | inherit
初始值：
用戶代理指定的值
應(yīng)用于：
所有元素
繼承性：
有
計算值：
根據(jù)指定確定
如果你希望文檔使用一種sans-serif字體，但是你并不關(guān)心是哪一種具體字體，以下就是
一個合適的聲明：
body {font-family: sans-serif;}
這樣用戶代理就會從sans-serif字體系列選擇一個字體（如Helvetica），并將其應(yīng)用到body元素。因為有繼承，這種字體選擇還將應(yīng)用到body元素中包含的所有元素，當然，除非有一種更特定的選擇器將其覆蓋。只使用這些通用系列（而不做其他指定），網(wǎng)頁設(shè)計師就能創(chuàng)建相當復雜的樣式表，以下規(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;}
因此，文檔大部分會采用某種serif字體（包括大多數(shù)段落），如Times，但class為 signature的段落除外，這些段落會用一種cursive字體顯示，如Author。1~4級標題都采用sans-serif字體，如Helvetica，而元素code、pre,tt和span,input將使用某種monospace字體，如Courier很巧合，本書中的這些元素通常也正是這樣顯示的。
另一方面，創(chuàng)作人員對于文檔或元素的顯示中使用何種字體可能有一些更特定的取向。類似地，用戶也可能想創(chuàng)建一個用戶樣式表，定義所有文檔顯示中使用的具體字體。不論哪一種情況，還是要使用font-family屬性。
假設(shè)目前所有h1都應(yīng)當使用Georgia字體。對此最簡單的規(guī)則如下：
h1 {font-family: Georgia;}
這會使顯示文檔的用戶代理對所有h1都使用Georgia字體，如圖5-2所示。
當然，這個規(guī)則假設(shè)用戶代理上Georgia字體可用。如果Georgia字體不可用，用戶代理就根本不能使用這個規(guī)則。它不會忽略這個規(guī)則，但是如果無法找到一個名叫Georgia 的字體，它可能只能使用用戶代理的默認字體來顯示h1元素，除此以外什么也不做。
不過，不必萬念俱灰。通過結(jié)合特定字體名和通用字體系列，可以創(chuàng)建與你預(yù)想的完全相同（或者至少很接近）的文檔。再來看前面的例子，以下標記告訴一個用戶代理使用Georgia（如果可用），如果Georgia字體不可用，則使用另外一種serif字體。
h1 {font-family: Georgia, serif;}
如果讀者沒有安裝Georgia字體，但是安裝了Times字體，用戶代理就可能對h1元素使用Times，盡管Times與Georgia并不完全匹配，但至少足夠接近。
處于這個原因，強烈建議在所有font-family規(guī)則中都提供一個通用字體系列。這樣一來，就提供了一條后路，在用戶代理無法提供與規(guī)則匹配的特定字體時，就可以選擇一個候選字體。這種候補策略很有幫助，因為在一個跨平臺環(huán)境中，將無法知道誰安裝了什么字體。沒錯，世界上所有Windows機器都可能安裝了Arial和Times New Roman 字體，但是有些Macintosh并沒有（特別是較老的機器），Unix機器可能也是如此。相反地，盡管在所有現(xiàn)代Macintosh機器上都安裝了MarkerFelt和Charcoal，但Windows 和Unix用戶不太可能安裝其中某種字體，同時安裝這兩種字體的更是少之又少。以下是另外一些例子：
h1 {font-family: Arial, sans-serif;}
h2 {font-family: Charcoal, sans-serif;}
p {font-family: TimesNR, serif;}
address {font-family: Chicago, sans-serif;}
如果你對字體很熟悉，顯示一個給定元素時可能會想到很多類似的字體。假設(shè)你希望一個文檔中的所有段落都使用Times顯示，不過也接受TimesNR、Georgia、New Century Schoolbook和New York （所有這些都是serif字體）。首先，先確定這些字體的優(yōu)先順序，然后用逗號把它們連起來：
p {font-family: Times, TimesNR,'New Century Schoolbook', Georgia,'New York'、serif;}
根據(jù)這個列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的serif字體。
你可能注意到了，前面的例子中出現(xiàn)了單引號，這在以前沒有出現(xiàn)過。只有當一個字體名中有一個或多個空格（如New York），或者如果字體名包括#或$之類的符號，才需要在font-family聲明中加引號。在這些情況下，整個字體名應(yīng)當用引號括起，這樣用戶代理才能搞清楚字體名到底是什么（你可能認為有逗號就足夠了，但并非如此）。因此，名為Karrank%的字體就應(yīng)當加引號：
h2 {font-family: Wedgie,'Karrank%', Klingon, fantasy;}
如果沒有引號，盡管規(guī)則的余下部分還會得到處理，但用戶代理有可能忽略這個特定的字體名。注意，根據(jù)CSS2.1規(guī)范，包含符號的字體名并不一定要加引號，但這是一種推薦做法，它類似于CSS規(guī)范中描述的“最佳實踐”。類似地，對包含空格的字體名也建議加引號?？梢钥吹剑ㄒ槐仨毤右柕氖桥c所接受關(guān)鍵字匹配的字體名。因此，如果需要一種名為“cursive”的字體，就必須加引號。
顯然，字體名中如果只包含一個詞，而且這個詞與font-family的任何關(guān)鍵字都不沖突，就不需要加引號，通用字體系列名（serif、monospace等等）在指示具體的通用系列時就不能加引號。如果將一個通用名用引號引起，用戶代理就會認為你需要一個與此同名的特定字體（例如，serif），而不是一個通用字體系列。
至于使用單引號還是雙引號，這兩種都是可以接受的。要記住，如果把一個font-family 規(guī)則放在style屬性中，則需要使用該屬性本身未曾使用的那種引號。因此，如果使用雙引號將font-family規(guī)則括起，就必須在規(guī)則內(nèi)部使用單引號，如以下標記所示：
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>
當前文章標題：字體在網(wǎng)頁設(shè)計中的運用
當前URL：http://www.gtalker.cn/news/wzzz/font-setting-in-web-design.html
上一篇：做網(wǎng)站中的url
下一篇：字體的加粗設(shè)置
