5.1 設(shè)置網(wǎng)頁文本字體

在HTML 5中，可以使用CSS 3字體屬性來定義文字的大小、字體、粗細等表現(xiàn)。常見的字體屬性包括字體、字號、字體顏色、字體風格等。

5.1.1 設(shè)置字體粗細屬性

font-weight屬性用于定義字體的粗細程度。font-weight屬性有13個有效值，分別是bold、bolder、lighter、normal、100～900。如果沒有設(shè)置該屬性，則使用其默認值normal。屬性值設(shè)置為100～900，值越大，加粗的程度就越大。

font-weight屬性值的具體含義如表5-1所示。

【例5-1】（實例文件：ch05\Chap5.1.html）設(shè)置字體粗細。

相關(guān)的代碼實例請參考Chap5.1.html文件，在IE瀏覽器中運行的結(jié)果如圖5-1所示。

5.1.2 設(shè)置字體風格屬性

font-style屬性用于設(shè)置字體的風格，即字體的顯示樣式。font-style屬性值有4個，具體含義如表5-2所示。

【例5-2】（實例文件：ch05\Chap5.2.html）設(shè)置字體風格。

相關(guān)的代碼實例請參考Chap5.2.html文件，在IE瀏覽器中運行的結(jié)果如圖5-2所示。

5.1.3 設(shè)置字體大小屬性

font-size屬性用于設(shè)置字體的大小。可以給font-size屬性指定具體的像素值，如“font-size：20px”，還可以通過一些參數(shù)來設(shè)置字體的大小，這些參數(shù)和說明如表5-3所示。

【例5-3】（實例文件：ch05\Chap5.3.html）設(shè)置字體大小。

相關(guān)的代碼實例請參考Chap5.3.html文件，在IE瀏覽器中運行的結(jié)果如圖5-3所示。

5.1.4 設(shè)置字體類型屬性

font-family屬性用于指定文字的字體類型，如隸書、宋體、黑體、楷體等。

【例5-4】（實例文件：ch05\Chap5.4.html）設(shè)置字體類型。

相關(guān)的代碼實例請參考Chap5.4.html文件，在IE瀏覽器中運行的結(jié)果如圖5-4所示。

5.1.5 設(shè)置文本行高屬性

line-height屬性用于設(shè)置行間距，即行高。它的取值可以是百分比數(shù)值、浮點數(shù)和單位標識符組成的長度值，允許為負值，百分比取值是基于字體的高度尺寸。

【例5-5】（實例文件：ch05\Chap5.5.html）設(shè)置文本的行高。

相關(guān)的代碼實例請參考Chap5.5.html文件，在IE瀏覽器中運行的結(jié)果如圖5-5所示。

5.1.6 設(shè)置字體復合屬性

在網(wǎng)頁設(shè)計中，對字體需要設(shè)置多種屬性值時，多個屬性值分別書寫相對比較麻煩，可以使用font屬性解決這一問題。font屬性中的屬性值的排列順序是font-style、font-variant、font-weight、font-size和font-family，各屬性的屬性值之間使用空格隔開。Family屬性要定義多個屬性值時，需要用逗號把每個屬性值隔開。

其中font-style、font-variant和font-weight這三個屬性的順序可以自由調(diào)換，甚至可以不寫，font-size和font-family屬性必須固定順序出現(xiàn)，而且必須都出現(xiàn)在font屬性中。

【例5-6】（實例文件：ch05\Chap5.6.html）設(shè)置字體的復合屬性。

相關(guān)的代碼實例請參考Chap5.6.html文件，在IE瀏覽器中運行的結(jié)果如圖5-6所示。

5.1.7 定義網(wǎng)頁文本顏色屬性

對于網(wǎng)頁中的文本顏色，使用color屬性來設(shè)置，color屬性的取值如表5-4所示。

【例5-7】（實例文件：ch05\Chap5.7.html）設(shè)置網(wǎng)頁文本顏色。

相關(guān)的代碼實例請參考Chap5.7.html文件，在IE瀏覽器中運行的結(jié)果如圖5-7所示。