font屬性

當然，所有這些屬性都很復雜，不過要使用所有這些屬性可能更麻煩：

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;}

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

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

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

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

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

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

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

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

不過，要認識到重要的一點，只是font的前三個值允許采用任意的順序。后兩個值則要嚴格得多。font-size和font-family不僅要以此順序（font-size在前，font- family 在后）作為聲明中的最后兩個值，而且font聲明中必須有這兩個值。這很明確。如果少了其中某個屬性，那么整個規(guī)則都是無效的，很可能被用戶代理完全忽略。因此，以下規(guī)則會得到如圖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個值，但事實并非如此。還可以使用font設置line-height,盡管line-height是一個文本屬性而不是字體屬性。這可以作為對font-size值的一個補充，并用一個斜線（/）與之分隔：

body {font-size: 12px;}

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

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

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

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

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

適當?shù)厥褂煤唽?/h5>

要記住重要的一點，font作為一個簡寫屬性，如果使用不小心，可能會有預想不到的作用?？紤]以下規(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元素既不是斜體也不是小型大寫字母，而且所有元素都不是粗體，你注意到這些了嗎？這種行為是正確的。在使用簡寫屬性font時，所有被忽略的值都會重置為其默認值。因此，前面的例子可以重寫如下，這仍是等價的：

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

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

h3 {font-size: 150%;}

這會把h2元素的字體風格和變形設置為normal,將所有三個元素的font-weight設置為normal。這是簡寫屬性的期望行為。h3與h2的命運不同，因為這里使用了屬性font-size,這不是一個簡寫屬性，因此只會影響該屬性自己的值。

使用系統(tǒng)字體

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

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

button {font: caption;}

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

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

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

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

注意：用戶界面風格將在第13章更詳細地討論。