CSS Web 字體

CSS @font-face 規則

Web 字體允許 Web 設計人員使用用戶計算機上未安裝的字體。

當您找到/購買了想要使用的字體后,只需將字體文件包含在您的 Web 服務器上,它將在需要時自動下載給用戶。

您的“自有”字體在 CSS @font-face 規則中進行定義。

不同的字體格式

TrueType 字體 (TTF)

TrueType 是 1980 年代后期由 Apple 和 Microsoft 開發的字體標準。 TrueType 是 Mac OS 和 Microsoft Windows 操作系統最常用的字體格式。

OpenType 字體 (OTF)

OpenType 是可縮放計算機字體的格式。它基于 TrueType 構建,并且是 Microsoft 的注冊商標。今天,OpenType 字體在主要計算機平臺上得到普遍使用。

Web 開放字體格式 (WOFF)

WOFF 是用于網頁的字體格式。它于 2009 年開發,現已成為 W3C 的推薦標準。 WOFF 本質上是具有壓縮和其他元數據的 OpenType 或 TrueType。目標是支持在有帶寬限制的網絡上從服務器到客戶端進行字體分發。

Web 開放字體格式 (WOFF 2.0)

TrueType/OpenType 字體比 WOFF 1.0 提供更好的壓縮。

SVG 字體/形狀

SVG 字體允許在顯示文本時將 SVG 用作字形。 SVG 1.1 規范定義了一個字體模塊,該模塊允許在 SVG 文檔中創建字體。您還可以將 CSS 應用于 SVG 文檔,同時 @font-face 規則可以應用于 SVG 文檔中的文本。

嵌入式 OpenType 字體 (EOT)

EOT 字體是 Microsoft 設計的 OpenType 字體的緊湊形式,用作網頁上的嵌入式字體。

對字體格式的瀏覽器支持

表格中的數字注明了完全支持該字體格式的首個瀏覽器版本。

字體格式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG 不支持 不支持 不支持 3.2 不支持
EOT 6.0 不支持 不支持 不支持 不支持

*IE:該字體格式僅在設置為 "installable" 時有效。

*Firefox:默認情況下不支持,但可以啟用(需要將標志設置為 "true" 才能使用 WOFF2)。

使用您需要的字體

在 @font-face 規則中:首先定義字體的名稱(例如 myFirstFont),然后指向該字體文件。

提示:字體 URL 始終使用小寫字母。大寫字母可能會在 IE 中產生意外結果。

如需將字體用于 HTML 元素,請通過 font-family 屬性引用字體名稱(myFirstFont):

實例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

親自試一試

使用粗體文本

您必須添加另一條 @font-face 規則,其中包含粗體文本的描述符:

實例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

親自試一試

文件 "sansation_bold.woff" 是另一個字體文件,其中包含 Sansation 字體的粗體字符。

每當帶有 "myFirstFont" 字體族的一段文本應呈現粗體時,瀏覽器都會使用它。

這樣,您就可以為同一字體設置許多 @font-face 規則。

CSS 字體描述

下表列出了能夠在 @font-face 規則內定義的所有字體描述符(font descriptor):

描述符 描述
font-family name 必需。定義字體名稱。
src URL 必需。定義字體文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可選。定義應如何拉伸字體。默認值是 "normal"。
font-style
  • normal
  • italic
  • oblique
可選。定義字體的樣式。默認值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可選。定義字體的粗細。默認值是 "normal"。
unicode-range unicode-range 可選。定義字體支持的 UNICODE 字符范圍。默認值是 "U+0-10FFFF"。