@font-face

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

@font-face CSS at-rule 允許您指定一個自定義字型來顯示文字；該字型可以從遠端伺服器載入，也可以從使用者計算機上本地安裝的字型載入。

語法

css

@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-face 規則需要一個 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;
font-feature-settings: 允許控制 OpenType 字型中的高階排版功能。
font-variation-settings: 透過指定要變化的特性的四字母軸名稱及其變化值，允許對 OpenType 或 TrueType 字型變體進行低階控制。
line-gap-override: 定義字型的行間距度量。
size-adjust: 定義此字型相關的字形輪廓和度量的乘數。這使得在相同字型大小下渲染各種字型時，更容易協調它們的設計。
src: 指定字型資源的引用，包括有關字型格式和技術的提示。@font-face 規則需要 src 才能有效。
unicode-range: 要從字型中使用的 Unicode 碼點範圍。

描述

通常將 url() 和 local() 一起使用，以便如果可用，則使用使用者安裝的字型副本，如果使用者裝置上未找到該字型，則回退到下載字型副本。

如果提供了 local() 函式，指定要在使用者裝置上查詢的字型名稱，並且如果使用者代理找到匹配項，則使用該本地字型。否則，下載並使用使用 url() 函式指定的字型資源。

瀏覽器嘗試按其列表宣告順序載入資源，因此通常 local() 應該寫在 url() 之前。這兩個函式都是可選的，因此只包含一個或多個 local() 而沒有 url() 的規則塊是可能的。如果需要具有 format() 或 tech() 值的更具體的字型，則應將其列在沒有這些值的版本之前，因為否則會首先嚐試並使用不太具體的變體。

透過允許作者提供自己的字型，@font-face 使得設計內容不再侷限於所謂的“網路安全”字型（即，非常常見以至於被認為是普遍可用的字型）。指定要查詢和使用的本地安裝字型的名稱的能力，使得可以超越基本功能自定義字型，同時無需依賴網際網路連線即可實現。

注意：在舊版瀏覽器上載入字型的回退策略在src 描述符頁面中描述。

@font-face at-rule 不僅可以在 CSS 的頂層使用，也可以在任何 CSS conditional-group at-rule 內部使用。

字型 MIME 型別

格式	MIME 型別
TrueType	`font/ttf`
OpenType	`font/otf`
Web Open Font Format	`font/woff`
Web Open Font Format 2	`font/woff2`

注意

網路字型受相同的域限制（字型檔案必須與使用它們的頁面在同一域上），除非使用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> }

示例

指定可下載字型

此示例指定要使用的可下載字型，並將其應用於文件的整個正文

html

<body>
  This is Bitstream Vera Serif Bold.
</body>

css

@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”的可下載字型代替

css

@font-face {
  font-family: "MyHelvetica";
  src:
    local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
    url("MgOpenModernaBold.ttf");
  font-weight: bold;
}

規範

規範
CSS 字型模組第 4 級 # font-face-rule

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者最後修改於 2025 年 7 月 14 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題