網(wǎng)頁設(shè)計(jì)中字體屬性的設(shè)置

font屬性

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

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

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

一般來講,font聲明可以有上述各個(gè)字體屬性的任何值,或者有一個(gè)“系統(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)頁設(shè)計(jì)樣式“可以”用這種方式簡寫,因?yàn)檫€可以有其他寫法,font屬性可以用很寬松的方式來指定。如果仔細(xì)看前面的例子,會看到前三個(gè)值出現(xiàn)的順序并不一樣。在h1 規(guī)則中,前三個(gè)值依次分別是font-style、font-weight和font-variant的值,而在第二個(gè)規(guī)則中,其順序則為font-weight、font-variant和font-style,這里沒有出錯(cuò),因?yàn)檫@三個(gè)屬性值可以按任何順序來寫。此外,如果其中某個(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值,但效果還是與前例完全相同。

不過,要認(rèn)識到重要的一點(diǎn),只是font的前三個(gè)值允許采用任意的順序。后兩個(gè)值則要嚴(yán)格得多。font-size和font-family不僅要以此順序(font-size在前,font- family 在后)作為聲明中的最后兩個(gè)值,而且font聲明中必須有這兩個(gè)值。這很明確。如果少了其中某個(gè)屬性,那么整個(gè)規(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個(gè)值,但事實(shí)并非如此。還可以使用font設(shè)置line-height,盡管line-height是一個(gè)文本屬性而不是字體屬性。這可以作為對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之前,絕對不能在line-height后面,而且這兩個(gè)屬性總要用一個(gè)斜線分隔。

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

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

適當(dāng)?shù)厥褂煤唽?/h5>

要記住重要的一點(diǎn),font作為一個(gè)簡寫屬性,如果使用不小心,可能會有預(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元素既不是斜體也不是小型大寫字母,而且所有元素都不是粗體,你注意到這些了嗎?這種行為是正確的。在使用簡寫屬性font時(shí),所有被忽略的值都會重置為其默認(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%;}

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

使用系統(tǒng)字體

如果希望一個(gè)Web頁面結(jié)合用戶操作系統(tǒng)的設(shè)置,在這種情況下,font的系統(tǒng)字體值會很方便。這些值用于取得操作系統(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è)置,也就是說,字體系列、大小、加粗、風(fēng)格等等都要一起設(shè)置。因此,上例中的按鈕文本看上去與操作系統(tǒng)中的按鈕文本完全相同,而不論其大小與按鈕周圍的內(nèi)容是否匹配。不過,一旦已經(jīng)設(shè)置了系統(tǒng)字體,就可以修改其中的單個(gè)值。因此,以下規(guī)則會確保按鈕的字體與其父元素的字體大小相等:

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

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

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


網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)