font屬性

當(dāng)然，所有這些屬性都很復(fù)雜，不過(guò)要使用所有這些屬性可能更麻煩：

h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px;font-weight:900; font-style: italic; font-variant: small-caps;}

h2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; font-style: italic; font-variant: normal;}

通過(guò)對(duì)選擇器分組可以部分地解決這個(gè)問(wèn)題,不過(guò)將所有內(nèi)容都合并到一個(gè)屬性中不是更簡(jiǎn)單嗎？這就是font屬性，它是涵蓋所有其他字體屬性（以及少數(shù)其他內(nèi)容）的一個(gè)簡(jiǎn)寫屬性。

一般來(lái)講，font聲明可以有上述各個(gè)字體屬性的任何值，或者有一個(gè)“系統(tǒng)字體”值(見(jiàn)“使用系統(tǒng)字體”一節(jié)的介紹）。因此，前面的例子可以簡(jiǎn)寫如下：

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 (font: bold normal italic 24px  Verdana, Helvetica, Arial, sans-serif;}

我說(shuō)過(guò)，網(wǎng)頁(yè)設(shè)計(jì)樣式“可以”用這種方式簡(jiǎn)寫，因?yàn)檫€可以有其他寫法，font屬性可以用很寬松的方式來(lái)指定。如果仔細(xì)看前面的例子，會(huì)看到前三個(gè)值出現(xiàn)的順序并不一樣。在h1 規(guī)則中，前三個(gè)值依次分別是font-style、font-weight和font-variant的值，而在第二個(gè)規(guī)則中，其順序則為font-weight、font-variant和font-style,這里沒(méi)有出錯(cuò)，因?yàn)檫@三個(gè)屬性值可以按任何順序來(lái)寫。此外，如果其中某個(gè)屬性的值為normal,則可以忽略。因此，以下規(guī)則等價(jià)于前面的例子：

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}

在這個(gè)例子中，h2規(guī)則中忽略了normal值，但效果還是與前例完全相同。

不過(guò)，要認(rèn)識(shí)到重要的一點(diǎn)，只是font的前三個(gè)值允許采用任意的順序。后兩個(gè)值則要嚴(yán)格得多。font-size和font-family不僅要以此順序（font-size在前，font- family 在后）作為聲明中的最后兩個(gè)值，而且font聲明中必須有這兩個(gè)值。這很明確。如果少了其中某個(gè)屬性，那么整個(gè)規(guī)則都是無(wú)效的，很可能被用戶代理完全忽略。因此，以下規(guī)則會(huì)得到如圖5-25所示的結(jié)果：

h1 {font: normal normal italic 30px sans-serif;}/*no problem here */

h2 {font: 1.5em sans-serif;}/* also fine; omitted values set to 'normal'*/

h3 (font: sans-serif;}/* INVALID——no 'font-size' provided */

h4 {font: lighter 14px;}/* INVALID——no 'font-family' provided */

增加行高

到目前為止，我們將font處理為就好像它只有5個(gè)值，但事實(shí)并非如此。還可以使用font設(shè)置line-height,盡管line-height是一個(gè)文本屬性而不是字體屬性。這可以作為對(duì)font-size值的一個(gè)補(bǔ)充，并用一個(gè)斜線（/）與之分隔：

body {font-size: 12px;}

h2 (font: bold italic: 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}

這些規(guī)則如圖5-26所示，將所有h2元素設(shè)置為粗斜體（使用sans-serif字體系列中的某個(gè)字體），將font-size設(shè)置為24px(body大小的兩倍），并設(shè)置line-height為30px。

增加這個(gè)line-height值完全是可選的，就像前三個(gè)font值一樣。如果確實(shí)包含了一個(gè)line-height，要記住font-size總是在line-height之前，絕對(duì)不能在line-height后面，而且這兩個(gè)屬性總要用一個(gè)斜線分隔。

盡管聽(tīng)上去有些啰嗦，不過(guò)要知道這是CSS網(wǎng)頁(yè)設(shè)計(jì)師最常犯的錯(cuò)誤之一，所以再?gòu)?qiáng)調(diào)也不為過(guò)：font中font-size和font-family值是必要的，而且順序不能變。不過(guò)所有其他值都是可選的。

注意：line-height將在下一章討論。

適當(dāng)?shù)厥褂煤?jiǎn)寫

要記住重要的一點(diǎn)，font作為一個(gè)簡(jiǎn)寫屬性，如果使用不小心，可能會(huì)有預(yù)想不到的作用?？紤]以下規(guī)則，如圖5-27所示，

hi, h2, h3 {font: italic small-caps 250% sans-serif;}

h2 {font: 200% sans-serif;}

h3 (font-size: 150%;}

<hl>This is an h1 elemenc</hl>

<h2>This is an h2 element</h2>

<h3>This is an h3 element</h3>

h2元素既不是斜體也不是小型大寫字母，而且所有元素都不是粗體，你注意到這些了嗎？這種行為是正確的。在使用簡(jiǎn)寫屬性font時(shí)，所有被忽略的值都會(huì)重置為其默認(rèn)值。因此，前面的例子可以重寫如下，這仍是等價(jià)的：

h1,h2,h3{font:italic normal small-caps 250% sans-serif;}

h2 {font: normal normal normal 200% sans-serif;}

h3 {font-size: 150%;}

這會(huì)把h2元素的字體風(fēng)格和變形設(shè)置為normal,將所有三個(gè)元素的font-weight設(shè)置為normal。這是簡(jiǎn)寫屬性的期望行為。h3與h2的命運(yùn)不同，因?yàn)檫@里使用了屬性font-size,這不是一個(gè)簡(jiǎn)寫屬性，因此只會(huì)影響該屬性自己的值。

使用系統(tǒng)字體

如果希望一個(gè)Web頁(yè)面結(jié)合用戶操作系統(tǒng)的設(shè)置，在這種情況下，font的系統(tǒng)字體值會(huì)很方便。這些值用于取得操作系統(tǒng)中元素的字體大小、字體系列、字體加粗、字體風(fēng)格和字體變形，并將其應(yīng)用到一個(gè)元素。這些值如下：

例如，你可能想把一個(gè)按鈕的字體設(shè)置為與操作系統(tǒng)中的按鈕字體完全相同，例如：

button {font: caption;}

利用這些值，可以創(chuàng)建一個(gè)基于網(wǎng)站制作的應(yīng)用，使之看上去非常類似于用戶操作作系統(tǒng)自帶的應(yīng)用。

注意，系統(tǒng)字體可能只能整體設(shè)置，也就是說(shuō)，字體系列、大小、加粗、風(fēng)格等等都要一起設(shè)置。因此，上例中的按鈕文本看上去與操作系統(tǒng)中的按鈕文本完全相同，而不論其大小與按鈕周圍的內(nèi)容是否匹配。不過(guò)，一旦已經(jīng)設(shè)置了系統(tǒng)字體，就可以修改其中的單個(gè)值。因此，以下規(guī)則會(huì)確保按鈕的字體與其父元素的字體大小相等：

button {font: caption;font-size: 1em;}

如果需要一種系統(tǒng)字體，但是用戶機(jī)器上不存在這樣一種字體，用戶代理可能會(huì)試圖找出一種近似的字體，如縮小caption字體的大小，從而得到small-caption字體。如果無(wú)法找到這樣的近似字體，用戶代理就要使用它自己的一種默認(rèn)字體。如果可以找到一個(gè)系統(tǒng)字體，但是無(wú)法讀取其所有值，就應(yīng)當(dāng)使用默認(rèn)值。例如，用戶代理可能可以找到一個(gè)status-bar字體，但是無(wú)法得到這種字體是否是small-caps的有關(guān)信息。在這種情況下，用戶代理會(huì)對(duì)small-caps屬性使用值normal。

注意：用戶界面風(fēng)格將在第13章更詳細(xì)地討論。