CSS 字型屬性定義文字的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）。

CSS 字體系列

在 CSS 中，有兩種不同型別的字體系列名稱：

• 通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）

• 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：

• Serif 字型

• Sans-serif 字型

• Monospace 字型

• Cursive 字型

• Fantasy 字型

如果需要了解更多有關字體系列的知識，請閱讀CSS 字體系列。

指定字體系列

使用font-family 屬性定義文字的字體系列。

使用通用字體系列

如果你希望文件使用一種 sans-serif 字型，但是你並不關心是哪一種字型，以下就是一個合適的宣告：

body {font-family: sans-serif;}

這樣使用者代理就會從 sans-serif 字體系列中選擇一個字型（如 Helvetica），並將其應用到 body 元素。因為有繼承，這種字型選擇還將應用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。

指定字體系列

除了使用通用的字體系列，您還可以通過 font-family 屬性設定更具體的字型。

下面的例子為所有 h1 元素設定了 Georgia 字型：

h1 {font-family: Georgia;}

這樣的規則同時會產生另外一個問題，如果使用者代理上沒有安裝 Georgia 字型，就只能使用使用者代理的預設字型來顯示 h1 元素。

我們可以通過結合特定字型名和通用字體系列來解決這個問題：

h1 {font-family: Georgia, serif;}

如果讀者沒有安裝 Georgia，但安裝了 Times 字型（serif 字體系列中的一種字型），使用者代理就可能對 h1 元素使用 Times。儘管 Times 與 Georgia 並不完全匹配，但至少足夠接近。

因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。這樣就提供了一條後路，在使用者代理無法提供與規則匹配的特定字型時，就可以選擇一個候選字型。

如果您對字型非常熟悉，也可以為給定的元素指定一系列類似的字型。要做到這一點，需要把這些字型按照優先順序排列，然後用逗號進行連線：

p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

根據這個列表，使用者代理會按所列的順序查詢這些字型。如果列出的所有字型都不可用，就會簡單地選擇一種可用的 serif 字型。

使用引號

您也許已經注意到了，上面的例子中使用了單引號。只有當字型名中有一個或多個空格（比如 New York），或者如果字型名包括 # 或 $ 之類的符號，才需要在 font-family 宣告中加引號。

單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

字型風格

font-style 屬性最常用於規定斜體文字。

該屬性有三個值：

• normal - 文字正常顯示

• italic - 文字斜體顯示

• oblique - 文字傾斜顯示

例項

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic 和 oblique 的區別

font-style 非常簡單：用於在 normal 文字、italic 文字和 oblique 文字之間選擇。唯一有點複雜的是明確 italic 文字和 oblique 文字之間的差別。

斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文字則是正常豎直文字的一個傾斜版本。

通常情況下，italic 和 oblique 文字在 web 瀏覽器中看上去完全一樣。

字型變形

font-variant 屬性可以設定小型大寫字母。

小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母採用不同大小的大寫字母。

例項

p {font-variant:small-caps;}

字型加粗

font-weight 屬性設定文字的粗細。

使用 bold 關鍵字可以將文字設定為粗體。

關鍵字 100 ~ 900 為字型指定了 9 級加粗度。如果一個字型內建了這些加粗級別，那麼這些數字就直接對映到預定義的級別，100 對應最細的字型變形，900 對應最粗的字型變形。數字 400 等價於 normal，而 700 等價於 bold。

如果將元素的加粗設定為 bolder，瀏覽器會設定比所繼承值更粗的一個字型加粗。與此相反，關鍵詞 lighter 會導致瀏覽器將加粗度下移而不是上移。

例項

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

足球錄影

字型大小

font-size 屬性設定文字的大小。

有能力管理文字的大小在 web 設計領域很重要。但是，您不應當通過調整文字大小使段落看上去像標題，或者使標題看上去像段落。

請始終使用正確的 HTML 標題，比如使用 <h1> - <h6> 來標記標題，使用 <p> 來標記段落。

font-size 值可以是絕對或相對值。

絕對值：

• 將文字設定為指定的大小

• 不允許使用者在所有瀏覽器中改變文字大小（不利於可用性）

• 絕對大小在確定了輸出的物理尺寸時很有用

相對大小：

• 相對於周圍的元素來設定大小

• 允許使用者在瀏覽器改變文字大小

注意：如果您沒有規定字型大小，普通文字（比如段落）的預設大小是 16 畫素 (16px=1em)。

使用畫素來設定字型大小

通過畫素設定文字大小，可以對文字大小進行完全控制：

例項

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

在 Firefox, Chrome, and Safari 中，可以重新調整以上例子的文字大小，但是在 Internet Explorer 中不行。

雖然可以通過瀏覽器的縮放工具調整文字大小，但是這實際上是對整個頁面的調整，而不僅限於文字。

使用 em 來設定字型大小

如果要避免在 Internet Explorer 中無法調整文字的問題，許多開發者使用 em 單位代替 pixels。

W3C 推薦使用 em 尺寸單位。

1em 等於當前的字型尺寸。如果一個元素的 font-size 為 16 畫素，那麼對於該元素，1em 就等於 16 畫素。在設定字型大小時，em 的值會相對於父元素的字型大小改變。

瀏覽器中預設的文字大小是 16 畫素。因此 1em 的預設尺寸是 16 畫素。

可以使用下面這個公式將畫素轉換為 em：pixels/16=em

（注：16 等於父元素的預設字型大小，假設父元素的 font-size 為 20px，那麼公式需改為：pixels/20=em）

例項

h1 {font-size:3.75em;} /* 60px/16=3.75em */h2 {font-size:2.5em;}  /* 40px/16=2.5em */p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子中，以 em 為單位的文字大小與前一個例子中以畫素計的文字是相同的。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文字大小。

不幸的是，在 IE 中仍存在問題。在重設文字大小時，會比正常的尺寸更大或更小。

結合使用百分比和 EM

在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設定預設的 font-size 值：

例項

body {font-size:100%;}h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

CSS 字型屬性