網(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è)閱讀器上一定采用某種字體,請(qǐng)別妄想了。
盡管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字體。
你可能注意到了,前面的例子中出現(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>