CSS 字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫字母）。
CSS 字體系列
在 CSS 中，有兩種不同類型的字體系列名稱：
- 通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 "Serif" 或 "Monospace"）
- 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
- Serif 字體
- Sans-serif 字體
- Monospace 字體
- Cursive 字體
- Fantasy 字體
如果需要了解更多有關(guān)字體系列的知識，請閱讀 CSS 字體系列。
指定字體系列
使用 font-family 屬性 定義文本的字體系列。
使用通用字體系列
如果你希望文檔使用一種 sans-serif 字體，但是你并不關(guān)心是哪一種字體，以下就是一個(gè)合適的聲明：
body {font-family: sans-serif;}親自試一試
這樣用戶代理就會從 sans-serif 字體系列中選擇一個(gè)字體（如 Helvetica），并將其應(yīng)用到 body 元素。因?yàn)橛欣^承，這種字體選擇還將應(yīng)用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。
指定字體系列
除了使用通用的字體系列，您還可以通過 font-family 屬性設(shè)置更具體的字體。
下面的例子為所有 h1 元素設(shè)置了 Georgia 字體：
h1 {font-family: Georgia;}親自試一試
這樣的規(guī)則同時(shí)會產(chǎn)生另外一個(gè)問題，如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認(rèn)字體來顯示 h1 元素。
我們可以通過結(jié)合特定字體名和通用字體系列來解決這個(gè)問題：
h1 {font-family: Georgia, serif;}親自試一試
如果讀者沒有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對 h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。
因此，我們建議在所有 font-family 規(guī)則中都提供一個(gè)通用字體系列。這樣就提供了一條后路，在用戶代理無法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。
如果您對字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點(diǎn)，需要把這些字體按照優(yōu)先順序排列，然后用逗號進(jìn)行連接：
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;} 親自試一試
根據(jù)這個(gè)列表，用戶代理會按所列的順序查找這些字體。如果列出的所有字體都不可用，就會簡單地選擇一種可用的 serif 字體。
使用引號
您也許已經(jīng)注意到了，上面的例子中使用了單引號。只有當(dāng)字體名中有一個(gè)或多個(gè)空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號。
單引號或雙引號都可以接受。但是，如果把一個(gè) font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
親自試一試
字體風(fēng)格
font-style 屬性最常用于規(guī)定斜體文本。
該屬性有三個(gè)值：
- normal - 文本正常顯示
- italic - 文本斜體顯示
- oblique - 文本傾斜顯示
實(shí)例
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 親自試一試
italic 和 oblique 的區(qū)別
font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點(diǎn)復(fù)雜的是明確 italic 文本和 oblique 文本之間的差別。
斜體（italic）是一種簡單的字體風(fēng)格，對每個(gè)字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個(gè)傾斜版本。
通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。
字體變形
font-variant 屬性可以設(shè)定小型大寫字母。
小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。
實(shí)例
p {font-variant:small-caps;}親自試一試
字體加粗
font-weight 屬性設(shè)置文本的粗細(xì)。
使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。
關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個(gè)字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100 對應(yīng)最細(xì)的字體變形，900 對應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。
如果將元素的加粗設(shè)置為 bolder，瀏覽器會設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會導(dǎo)致瀏覽器將加粗度下移而不是上移。
實(shí)例
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 親自試一試
字體大小
font-size 屬性設(shè)置文本的大小。
有能力管理文本的大小在 web 設(shè)計(jì)領(lǐng)域很重要。但是，您不應(yīng)當(dāng)通過調(diào)整文本大小使段落看上去像標(biāo)題，或者使段落看上去像標(biāo)題。
請始終使用正確的 HTML 標(biāo)題，比如使用 <h1> - <h6> 來標(biāo)記標(biāo)題，使用 <p> 來標(biāo)記段落。
font-size 值可以是絕對或相對值。
絕對值：
- 將文本設(shè)置為指定的大小
- 不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
- 絕對大小在確定了輸出的物理尺寸時(shí)很有用
相對大小：
- 相對于周圍的元素來設(shè)置大小
- 允許用戶在瀏覽器改變文本大小
注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。
使用像素來設(shè)置字體大小
通過像素設(shè)置文本大小，可以對文本大小進(jìn)行完全控制：
實(shí)例
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} 親自試一試
在 Firefox, Chrome, and Safari 中，可以重新調(diào)整以上例子的文本大小，但是在 Internet Explorer 中不行。
雖然可以通過瀏覽器的縮放工具調(diào)整文本大小，但是這實(shí)際上是對整個(gè)頁面的調(diào)整，而不僅限于文本。
使用 em 來設(shè)置字體大小
如果要避免在 Internet Explorer 中無法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替 pixels。
W3C 推薦使用 em 尺寸單位。
1em 等于當(dāng)前的字體尺寸。如果一個(gè)元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設(shè)置字體大小時(shí)，em 的值會相對于父元素的字體大小改變。
瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。
可以使用下面這個(gè)公式將像素轉(zhuǎn)換為 em：pixels/16=em
（注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）
實(shí)例
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 為單位的文本大小與前一個(gè)例子中以像素計(jì)的文本。不過，如果使用 em 單位，則可以在所有瀏覽器中調(diào)整文本大小。
不幸的是，在 IE 中仍存在問題。在重設(shè)文本大小時(shí)，會比正常的尺寸更大或更小。
結(jié)合使用百分百和 EM
在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設(shè)置默認(rèn)的 font-size 值：
實(shí)例
body {font-size:100%;} h1 {font-size:3.75em;} h2 {font-size:2.5em;} p {font-size:0.875em;}
親自試一試
我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。