CSS @font-face 規則
示例
指定一個名為“myFirstFont”的字型，並指定其 URL 所在的位置
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
使用 @font-face 規則，網頁設計師不再需要使用“Web 安全字型”之一。
在 @font-face 規則中，您必須先定義字型的名稱（例如 myFirstFont），然後指向字型檔案。
要將字型用於 HTML 元素，請透過 font-family 屬性引用字型名稱（myFirstFont）
div {
font-family: myFirstFont;
}
瀏覽器支援
@font-face 規則在 Edge、Chrome、Firefox、Safari 和 Opera 中得到支援。
表中的數字表示完全支援該字型格式的第一個瀏覽器版本。
| 字型格式 | |||||
|---|---|---|---|---|---|
| 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 | 不支援 | 不支援 | 不支援 | 不支援 |
*僅當字型格式設定為“可安裝”時，該字型格式才有效。
語法
@font-face {
font-properties
}
| 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 斜體 傾斜 |
可選。定義字型應如何樣式化。預設值為“normal” |
| font-weight | normal 粗體 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 規則。
相關頁面
CSS 教程：CSS Web 字型
