CSS @font-face 規則

定義和用法

通過使用 @font-face 規則，Web 設計師不必再使用任何一種“網絡安全”字體。

在 @font-face 規則中，您必須首先定義字體名稱（例如 myFirstFont），然后指向字體文件。

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

如需將字體用于 HTML 元素，請通過 font-family 屬性引用字體的名稱（myFirstFont）：

div {
  font-family: myFirstFont;
}

另請參閱：

CSS 教程：CSS Web 字體

實例

指定一種名為 "myFirstFont" 的字體，并規定可以找到它的 URL：

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

親自試一試

可以在頁面下方找到更多 TIY 實例。

CSS 語法

@font-face {
  font-properties
}
字體描述符 值 描述
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"。

更多實例

實例

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

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

親自試一試

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

每當設置字體族 "myFirstFont" 的一段文本應呈現為粗體時，瀏覽器就會使用它。

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

瀏覽器支持

Internet Explorer、Firefox、Opera、Chrome 和 Safari 都支持 @font-face 規則。

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

字體格式
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 Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

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

* Firefox：默認情況下是禁用的，但可啟用（需要將 flag 設置為 "true" 才能使用 WOFF2）。