第五章：字體
第五章：字體
這一課，你將學(xué)習(xí)字體以及如何用CSS來設(shè)置字體。我們還會(huì)考慮如何解決“網(wǎng)站所選的字體僅當(dāng)訪問者的PC上安裝有該字體時(shí)才會(huì)被顯示”這一難題。本課將對(duì)下列CSS屬性進(jìn)行講解：
字體族[font-family]
CSS屬性font-family的作用是設(shè)置一組按優(yōu)先級(jí)排序的字體列表，如果該列表中的第一個(gè)字體未在訪問者計(jì)算機(jī)上安裝，那么就嘗試列表中的下一個(gè)字體，依此類推，直到列表中的某個(gè)字體是已安裝的。
有兩種類型的名稱可用于分類字體：字體族名稱（family-name）和族類名稱（generic family）。下面來解釋這兩個(gè)術(shù)語。
字體族名稱（family-name）
字體族名稱（就是我們通常所說的.“字體”）的例子包括“Arial”、“Times New Roman”、“宋體”、“黑體”等等。
族類（generic family）
一個(gè)族類是一組具有統(tǒng)一外觀的字體族。sans-serif就是一例，它代表一組沒有“腳”的字體。
下面我們通過三個(gè)族類的例子來進(jìn)行解釋：
你在給出字體列表時(shí)，自然應(yīng)把首選字體放在前面、把候選字體放在后面。建議你在列表的最后給出一個(gè)族類（generic family），這樣，當(dāng)沒有一個(gè)指定字體可用時(shí)，頁面至少可以采用一個(gè)相同族類的字體來顯示。
下面是一個(gè)按優(yōu)先級(jí)排列的字體列表的例子：
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
h1標(biāo)題將采用Arial字體顯示。如果訪問者的計(jì)算機(jī)未安裝Arial，那么就使用Verdana字體。假如Verdana字體也沒安裝的話，那么將采用一個(gè)屬于sans-serif族類的字體來顯示這個(gè)h1標(biāo)題。
注意我們?yōu)?span lang="EN-US">“Times New Roman”采用的寫法：因?yàn)槠渲邪崭�，所以我們用引�?hào)將它括起來。
字體樣式[font-style]
CSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。在下例中，所有h2標(biāo)題都將顯示為斜體。
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
字體變化[font-variant]
CSS屬性font-variant的值可以是：normal（正常）或small-caps（小體大寫字母）。small-caps字體是一種以小尺寸顯示的大寫字母來代替小寫字母的字體。不太明白？我們來看幾個(gè)例子：
如果font-variant屬性被設(shè)置為small-caps，而沒有可用的支持小體大寫字母的字體，那么瀏覽器多半會(huì)將文字顯示為正常尺寸（而不是小尺寸）的大寫字母。
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
字體濃淡[font-weight]
CSS屬性font-weight指定字體顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。有些瀏覽器甚至支持采用100到900之間的數(shù)字（以百為單位）來衡量字體的濃淡。
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
字體大小[font-size]
字體的大小用CSS屬性font-size來設(shè)置。
字體大小可通過多種不同單位（比如像素或百分比等）來設(shè)置。在本教程中，我們將關(guān)注于最常用和最合適的單位。比如：
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
上面四種單位有著本質(zhì)的區(qū)別。‘px’和‘pt’將字體設(shè)置為固定大小，而‘%’和‘em’允許頁面瀏覽者自行調(diào)整字體的顯示尺寸。有些頁面瀏覽者可能是殘疾者、年長者、視力不佳者，或者他所使用的電腦顯示屏顯示質(zhì)量差。為了令你的網(wǎng)站對(duì)所有人都具有良好的可用性（accessibility），你應(yīng)采用像‘%’或‘em’這種允許用戶調(diào)節(jié)字體顯示大小的單位。
下面你能看到我們展示如何在Mozilla Firefox和Internet Explorer里調(diào)整字體大小。自己試試看！這個(gè)功能很不錯(cuò)吧？
縮寫[font]
CSS屬性font是上述各有關(guān)字體的CSS屬性的縮寫用法。
比如說下面四行應(yīng)用于p元素的代碼：
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屬性的值應(yīng)按以下次序書寫：
font-style | font-variant | font-weight | font-size | font-family
小結(jié)
在這一課，你學(xué)習(xí)了有關(guān)字體設(shè)置的用法。記住：CSS的一個(gè)主要優(yōu)勢就是可以在任何時(shí)候設(shè)置字體，你花幾分鐘就可以改變整個(gè)網(wǎng)站的字體。CSS節(jié)省時(shí)間，而且把事情簡化。在下一課，我們將學(xué)習(xí)文本（text）。
【第五章：字體】相關(guān)文章：
1.繁字體情侶簽名