@font-face
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
語法
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
}
描述符
ascent-override
-
定義字型的上升量度。
descent-override
-
定義字型的下降量度。
font-display
-
決定字型在下載並準備使用時的顯示方式。
font-family
-
指定將作為字型屬性的字型名稱。
font-stretch
-
一個
font-stretch
值。接受兩個值以指定字型範圍,例如font-stretch: 50% 200%;
font-style
-
一個
font-style
值。接受兩個值以指定字型範圍,例如font-style: oblique 20deg 50deg;
font-weight
-
一個
font-weight
值。接受兩個值以指定字型範圍,例如font-weight: 100 400;
备注: 字型變體參數值於 2018 年從規範中移除。
font-variant
值屬性仍受支持,但沒有對應的描述符。 font-feature-settings
-
允許控制 OpenType 字型的高級排版功能。
font-variation-settings
-
通過指定特徵的四字母軸名稱及其變化值,提供對 OpenType 或 TrueType 字型變體的低層級控制。
line-gap-override
-
定義字型的行間距指標。
size-adjust
-
定義字型輪廓和指標的縮放乘數,方便在相同字型大小下協調不同字型設計。
src
-
指定字型資源的參考,包括字型格式及技術的提示。該參數值是 @font-face 規則有效的必要條件。
unicode-range
-
指定字型所使用的 Unicode 碼位範圍。
描述
通常會同時使用 url()
和 local()
,以便在使用者的設備上存在字型時優先使用本地字型,否則則下載字型檔案來使用。
如果提供了 local()
函數,指定了一個在使用者設備上尋找的字型名稱,且如果使用者代理找到匹配的字型,則使用本地字型。否則,會下載並使用 url()
函數指定的字型資源。
瀏覽器會按照聲明列表的順序加載資源,因此通常應將 local()
寫在 url()
之前。這兩個函數都是可選的,因此可以僅包含一個或多個 local()
,而不使用 url()
。如果需要更特定的字型,例如帶有 format()
或 tech()
值的字型,應將這些版本列在不包含這些值的版本之前,否則會先嘗試並使用較不特定的版本。
通過允許作者提供自己的字型,@font-face
使內容設計不再受限於所謂的「Web 安全」字型(即被認為是普遍可用的常見字型)。指定本地安裝字型的名稱,允許在不依賴網際網路連接的情況下,超越基礎字型進行客製化。
备注:
有關為舊版瀏覽器加載字型的回退策略,請參考 src
描述符頁面。
@font-face
規則不僅可用於 CSS 的頂層,也可以用於任何 CSS 條件群組 @ 規則中。
字型 MIME 類型
格式 | MIME 類型 |
---|---|
TrueType | font/ttf |
OpenType | font/otf |
Web 開放字型格式 | font/woff |
Web 開放字型格式 2 | font/woff2 |
備註
-
Web 字型受相同域名的限制(字型檔案必須與使用它們的頁面在同一域名),除非使用 HTTP 存取控制來放寬此限制。
-
@font-face
不能在 CSS 選擇器中宣告。例如,以下內容將無法運作:css.className { @font-face { font-family: "MyHelvetica"; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.ttf"); font-weight: bold; } }
形式語法
@font-face =
@font-face { <declaration-list> }
範例
指定可下載字型
以下範例指定一個可下載的字型,並將其應用於整個文件的 body:
<body>
這是 Bitstream Vera Serif 粗體。
</body>
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
指定本地字型替代選項
在此範例中,優先使用使用者本地的「Helvetica Neue Bold」;如果使用者未安裝該字型(會嘗試完整字型名稱和 Postscript 名稱),則改用可下載的字型「MgOpenModernaBold.ttf」:
@font-face {
font-family: "MyHelvetica";
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
規範
Specification |
---|
CSS Fonts Module Level 4 # font-face-rule |
瀏覽器相容性
BCD tables only load in the browser