CSS 字體

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 字體實例:

設置文本的字體
本例演示如何設置文本字體。
設置字體尺寸
本例演示如何設置字體尺寸。
設置字體風格
本例演示如何設置字體風格。
設置字體的異體
本例演示如何設置字體的異體。
設置字體的粗細
本例演示如何設置字體的粗細。
所有字體屬性在一個聲明之內
本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。

CSS 字體屬性

屬性 描述
font 簡寫屬性。作用是把所有針對字體的屬性設置在一個聲明中。
font-family 設置字體系列。
font-size 設置字體的尺寸。
font-size-adjust 當首選字體不可用時,對替換字體進行智能縮放。(CSS2.1 已刪除該屬性。)
font-stretch 對字體進行水平拉伸。(CSS2.1 已刪除該屬性。)
font-style 設置字體風格。
font-variant 以小型大寫字體或者正常字體顯示文本。
font-weight 設置字體的粗細。