第五章：字體

時間：2011-08-15 11:12:25 隨筆(舊）我要投稿

第五章：字體

第五章：字體

第五章：字體

這一課，你將學習字體以及如何用CSS來設置字體。我們還會考慮如何解決“網站所選的字體僅當訪問者的PC上安裝有該字體時才會被顯示”這一難題。本課將對下列CSS屬性進行講解：

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

字體族[font-family]

CSS屬性font-family的作用是設置一組按優先級排序的字體列表，如果該列表中的第一個字體未在訪問者計算機上安裝，那么就嘗試列表中的下一個字體，依此類推，直到列表中的某個字體是已安裝的。

有兩種類型的名稱可用于分類字體：字體族名稱（family-name）和族類名稱（generic family）。下面來解釋這兩個術語。

字體族名稱（family-name）

字體族名稱（就是我們通常所說的.“字體”）的例子包括“Arial”、“Times New Roman”、“宋體”、“黑體”等等。

族類（generic family）

一個族類是一組具有統一外觀的字體族。sans-serif就是一例，它代表一組沒有“腳”的字體。

下面我們通過三個族類的例子來進行解釋：

你在給出字體列表時，自然應把首選字體放在前面、把候選字體放在后面。建議你在列表的最后給出一個族類（generic family），這樣，當沒有一個指定字體可用時，頁面至少可以采用一個相同族類的字體來顯示。

下面是一個按優先級排列的字體列表的例子：

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

h1標題將采用Arial字體顯示。如果訪問者的計算機未安裝Arial，那么就使用Verdana字體。假如Verdana字體也沒安裝的話，那么將采用一個屬于sans-serif族類的字體來顯示這個h1標題。

注意我們為“Times New Roman”采用的寫法：因為其中包含空格，所以我們用引號將它括起來。

字體樣式[font-style]

CSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。在下例中，所有h2標題都將顯示為斜體。

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字體是一種以小尺寸顯示的大寫字母來代替小寫字母的字體。不太明白？我們來看幾個例子：

如果font-variant屬性被設置為small-caps，而沒有可用的支持小體大寫字母的字體，那么瀏覽器多半會將文字顯示為正常尺寸（而不是小尺寸）的大寫字母。

h1 {font-variant: small-caps;}

h2 {font-variant: normal;}

顯示示例

字體濃淡[font-weight]

CSS屬性font-weight指定字體顯示的濃淡程度。其值可以是normal（正常）或bold（加粗）。有些瀏覽器甚至支持采用100到900之間的數字（以百為單位）來衡量字體的濃淡。

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

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

顯示示例

字體大小[font-size]

字體的大小用CSS屬性font-size來設置。

字體大小可通過多種不同單位（比如像素或百分比等）來設置。在本教程中，我們將關注于最常用和最合適的單位。比如：

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

上面四種單位有著本質的區別。‘px’和‘pt’將字體設置為固定大小，而‘%’和‘em’允許頁面瀏覽者自行調整字體的顯示尺寸。有些頁面瀏覽者可能是殘疾者、年長者、視力不佳者，或者他所使用的電腦顯示屏顯示質量差。為了令你的網站對所有人都具有良好的可用性（accessibility），你應采用像‘%’或‘em’這種允許用戶調節字體顯示大小的單位。