圖3顯示了示例加上font-family之后的效果.

　　圖3 以Georgia字體顯示的示例效果.

　　名稱內(nèi)含空格的字體

　　如果像指定名稱內(nèi)含空白的字體(比如說Lucida Grande),就必須以引號(hào)包住整個(gè)字體名稱.

　　在下面的例子中,將把Lucida Grande(有名的Macintosh字體)選為希望使用的字體,并且指定Trebuchet MS(有名的Windows字體)作為第二候補(bǔ),再加上一個(gè)通吃的sans-serif.在前面兩種字體都沒有安裝的情況下,取用預(yù)設(shè)的sans-serif字體.

　　body {
font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
line-height: 1.5em;
}

　　字距調(diào)整(又稱作字母間隔)

　　字距調(diào)整是個(gè)在印刷界描述文字間隔的名詞.與其同義的CSS屬性是letter-spacing.接著,讓我們?yōu)椋糷1>標(biāo)簽使用letter-spacing屬性,為示例的標(biāo)題加點(diǎn)料.

　　在為＜h1>標(biāo)簽應(yīng)用letter-spacing之后,就能使標(biāo)題更引人注目,而不必打開圖片編輯器開始制作圖片文字.

　　首先,讓我們?yōu)閘etter-spacing屬性加上負(fù)數(shù)值把標(biāo)題的文字緊縮:

　　h1 {
letter-spacing: -2px;
}

　　修改成果在圖4里能看到.

圖4 為＜h1>加上負(fù)數(shù)值得letter-spacing

　　或者嘗試加上正數(shù)的letter-spacing并同時(shí)用font-style屬性把標(biāo)題改為斜體:

　h1 {
letter-spacing: 4px;
font-style: italic;
}

　　圖5是依照上述修改過后的效果,單就文字來講變得十分引人注目了,不是嗎?不使文字間距變動(dòng)的太夸張是個(gè)明智之舉,因?yàn)檫@樣反而很容易使文字變得難以閱讀,一旦內(nèi)容難以閱讀,還有誰會(huì)在意它吸不吸引人呢?你說是吧!

　　圖5 使用正數(shù)letter-spacing值,并且應(yīng)用斜體

　　首字大寫

　　首字大寫在印刷界十分常見,這能為段落加上華麗而優(yōu)雅的效果,而且不必用上圖片就能辦到這種效果,只用CSS就夠了.

　　首先,必須為標(biāo)記源代碼加上一個(gè)"樣式錨點(diǎn)"讓我們有辦法調(diào)用第一段的第一個(gè)字母.我們將 "I" 用一組＜span>標(biāo)簽包起來并給它指定class=drop,如果我們才能在頁面或整個(gè)網(wǎng)站里重復(fù)使用首字大寫效果.

　?。紁>＜span class="drop">I＜/span>f you're painting with latex paints, and the job ...

　　在某些完全支持CSS2規(guī)范的現(xiàn)代瀏覽器中,我們可以用:first-letter偽類設(shè)定段落首字效果,而不必加上額外的標(biāo)簽,雖然語義上非常棒,不幸的是許多瀏覽器都不支持這個(gè)效果.

　　現(xiàn)在我們能完全控制第一段的 "I" 字母了,讓我們加上CSS聲明,以便把字體放大,同時(shí)將它浮動(dòng)到左側(cè)(這樣,其他的文字才不會(huì)包圍它顯示),我們也會(huì)加上裝飾用的背景,邊框.

　　.drop {
float: left;
font-size: 400%;
line-height: 1em;
margin: 4px 10px 10px 0;
padding: 4px 10px;
border: 2px solid #ccc;
background: #eee;
}

• css