第四課：字體

這一課我們將學習CSS的字體具體實現方法。此外你還會發現，只有連接互聯網的電腦安裝了相關字體，才能顯示網站選定的字體。下面是幾個將要描述的CSS特性：

font-family
font-style
font-variant
font-weight
font-size
font

字體[font-family]

特性“font-family”用于設置字體的優先順序，并顯示在給定的元素或網頁中。如果首先列出的字體沒有在訪問網站的電腦上安裝，就會依次嘗試下面的字體，直到找到適合的字體為止。字體分為“family-names”和“generic families”兩大類。下面將分別介紹這兩個術語。

1、Family-name：“Arial”， “Times New Roman” 或 “Tahoma”是family-name的幾個典型實例。

2、Generic family：可以用統一外觀的一組“Family-name”字體來描述“Generic family”。“sans-serif”就是一個實例，是一組沒有腳的字體集合。下圖可以說明這種區別：

在為網站列出字體時，一些人往往會從最喜歡的字體開始。但建議用“Generic family”字體做完整列表。這樣做的好處是，即使沒有相同的字體，也能顯示類似的同族字體。字體排列的優先順序應該是：

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

用<h1>標記的標題可以用字體”Arial”顯示。如果這種字體沒有安裝在用戶電腦上，會用”Verdana” 代替。如果這兩種字體都沒有，“sans-serif”家族的字體會顯示標題。應注意，由于“Times New Roman”字體名稱包含空格，因此需要用引號標記。

字形[font-style]

特性font-style定義字體的正常，斜體和傾斜顯示。在下面的實例中，所有帶<h2>的標題都用斜體顯示。

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

變體字[font-variant]

特性font-variant用于選擇字體的正常，或小型大寫顯示。如果是小型大寫字體，就需要使用較小的大寫字體。沒明白？看看下面的實例：

如果變體字被設置成小型大寫，但瀏覽器沒有小型大寫字體，通常會用大寫代替。

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

字體加重[font-weight]

特性font-weight描述字體是否以加粗或加重顯示。字體有正常或加粗兩種形式。一些瀏覽器支持用100-900之間的數字描述字體的加重程度。

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

字體尺寸[font-size]

字體的大小用特性font-size設置。可以選擇不同單元（如pixels和百分比）描述字體的大小。本教程專注于最常用和適合的單元，例如：

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

這四種單元有一個關鍵性區別。單元’px’和’pt’使字體尺寸絕對，而 ‘%’和’em’能讓用戶調整尺寸大小。由于很多人視力不佳，為了讓網站有更多人訪問，應使用’%’或’em’可調單元。下面會看到一個如何基于“Mozilla Firefox”和“Internet Explorer”調整文字尺寸的實例。

綜合[font]

用font這一綜合特性可以在一個單一特性中覆蓋不同的字體特點。例如，想象這四行代碼是如何描述字體特點的：

p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

如果用綜合特性font，可以將代碼縮減為：

p {
font: italic bold 30px arial, sans-serif;
}

字體值的順序是：font-style | font-variant | font-weight | font-size | font-family

概述

你現在已學習了一些與字體有關的可能性。記住，使用CSS的一個主要好處是可以在任何時候定義字體，能在幾分鐘內改變整個網站的字體。CSS不僅節省時間，還能讓你的工作輕松一些。接下來是學習文本。