src

Baseline 廣泛可用 *

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

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

@font-face at-rule 規則中的 src CSS 描述符用於指定包含字型資料的資源。它是 @font-face 規則生效所必需的。

語法

css

/* <url> values */
src: url("https://example.com/path/to/font.woff"); /* Absolute URL */
src: url("path/to/font.woff"); /* Relative URL */
src: url("path/to/svgFont.svg#example"); /* Fragment identifying font */

/* <font-face-name> values */
src: local(font); /* Unquoted name */
src: local(some font); /* Name containing space */
src: local("font"); /* Quoted name */
src: local("some font"); /* Quoted name containing a space */

/* <tech(<font-tech>)> values */
src: url("path/to/fontCOLRv1.otf") tech(color-COLRv1);
src: url("path/to/fontCOLR-svg.otf") tech(color-SVG);

/* <format(<font-format>)> values */
src: url("path/to/font.woff") format("woff");
src: url("path/to/font.otf") format("opentype");

/* Multiple resources */
src:
  url("path/to/font.woff") format("woff"),
  url("path/to/font.otf") format("opentype");

/* Multiple resources with font format and technologies */
src:
  url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
  url("trickster-outline.otf") format(opentype);

值

url(): 指定一個外部引用，由一個 <url> 和可選的 format() 與 tech() 元件值提示組成，這些提示指定了 URL 所引用資源的格式和字型技術。format() 和 tech() 元件是由逗號分隔的已知字型格式和技術字串列表。如果使用者代理不支援該字型技術或格式，它會跳過下載該字型資源。如果沒有提供格式或技術提示，則該字型資源總是會被下載。
format(): 跟在 url() 值後面的可選宣告，為使用者代理提供關於字型格式的提示。如果該值不被支援或無效，瀏覽器可能不會下載該資源，從而可能節省頻寬。如果省略，瀏覽器將下載資源然後檢測其格式。如果為了向後相容而引入的字型源不在已定義關鍵字列表中，請將格式字串用引號括起來。可能的值在下面的字型格式部分描述。
tech(): 跟在 url() 值後面的可選宣告，為使用者代理提供關於字型技術的提示。tech() 的值可以是字型技術中描述的關鍵字之一。
local(<font-face-name>): 指定當字型在使用者裝置上可用時應使用的字型名稱。將字型名稱用引號括起來是可選的。

備註： 對於 OpenType 和 TrueType 字型，<font-face-name> 用於匹配本地可用字型名稱表中的 Postscript 名稱或完整字型名稱。使用哪種型別的名稱因平臺和字型而異，因此你應該同時包含這兩種名稱，以確保在不同平臺上正確匹配。不得使用給定字型名稱的平臺替換項。

備註： 本地可用字型可能已預裝在使用者裝置上，也可能是使用者主動安裝的。

雖然特定裝置的所有使用者的預裝字型集可能相同，但使用者安裝的字型集則不然。因此，網站可以透過發現使用者安裝的字型集來為裝置構建指紋，幫助網站在網路上跟蹤使用者。

為防止這種情況，使用者代理在使用 local() 時可能會忽略使用者安裝的字型。
<font-face-name>: 使用 local() 元件值指定本地安裝字型的完整名稱或 postscript 名稱，該名稱在一個更大的字型族中唯一標識一個字型。名稱可以選用引號括起來。字型名稱不區分大小寫。

備註： 本地字型訪問 API 可用於訪問使用者本地安裝的字型資料——這包括更高級別的細節，如名稱、樣式和族系，以及底層字型檔案的原始位元組。

描述

該描述符的值是一個按優先順序排序、以逗號分隔的外部引用或本地安裝字型名稱列表，其中每個資源都使用 url() 或 local() 指定。當需要字型時，使用者代理會遍歷列出的引用集，使用它能成功啟用的第一個。包含無效資料或未找到的本地字型將被忽略，使用者代理會載入列表中的下一個字型。

如果設定了多個 src 描述符，則只有最後宣告的且能載入資源的規則會被應用。如果最後一個 src 描述符可以載入資源並且不包含 local() 字型，即使裝置上有可用的本地版本，瀏覽器也可能會下載外部字型檔案並忽略本地版本。

備註： 瀏覽器認為無效的描述符中的值將被忽略。某些瀏覽器如果任何一項無效，就會忽略整個描述符，即使只有一個項無效。這可能會影響回退方案的設計。更多資訊請參閱瀏覽器相容性。

與 CSS 中的其他 URL 一樣，該 URL 可以是相對的，此時它會相對於包含 @font-face 規則的樣式表的位置進行解析。對於 SVG 字型，URL 指向包含 SVG 字型定義的文件中的一個元素。如果省略元素引用，則預設為引用第一個定義的字型。類似地，可以包含多個字型的字型容器格式，對於給定的 @font-face 規則只加載其中一個字型。片段識別符號用於指示要載入哪個字型。如果容器格式缺少已定義的片段識別符號方案，則使用基於 1 的索引方案（例如，“font-collection#1”代表第一個字型，“font-collection#2”代表第二個字型，依此類推）。

如果字型檔案是多個字型的容器，則會包含一個片段識別符號以指示應使用的子字型，如下所示

css

/* WhichFont is the PostScript name of a font in the font file */
src: url("collection.otc#WhichFont");
/* WhichFont is the element id of a font in the SVG Font file */
src: url("fonts.svg#WhichFont");

字型格式

下表顯示了有效的字型關鍵字及其對應的字型格式。要檢查瀏覽器在 CSS 中是否支援某種字型格式，請使用 @supports 規則。

關鍵字	字型格式	常見副檔名
`collection`	OpenType 集合	.otc, .ttc
`embedded-opentype`	嵌入式 OpenType	.eot
`opentype`	OpenType	.otf, .ttf
`svg`	SVG 字型（已棄用）	.svg, .svgz
`truetype`	TrueType	.ttf
`woff`	WOFF 1.0	.woff
`woff2`	WOFF 2.0	.woff2

備註

format(svg) 代表 SVG 字型，而 tech(color-SVG) 代表帶有 SVG 表的 OpenType 字型（也稱為 OpenType-SVG 彩色字型），兩者完全不同。
無論字型檔案是使用三次貝塞爾曲線（在 CFF/CFF2 表內）還是二次貝塞爾曲線（在字形表內），opentype 和 truetype 的值都是等效的。

較舊的非規範化 format() 值具有以下等效語法；為了向後相容，以引號括起來的字串形式提供

舊語法	等效語法
`format("woff2-variations")`	`format(woff2) tech(variations)`
`format("woff-variations")`	`format(woff) tech(variations)`
`format("opentype-variations")`	`format(opentype) tech(variations)`
`format("truetype-variations")`	`format(truetype) tech(variations)`

字型技術

下表顯示了 tech() 描述符的有效值及其對應的字型技術。要檢查瀏覽器在 CSS 中是否支援某種字型技術，請使用 @supports at-rule。

關鍵字	描述
`color-cbdt`	彩色點陣圖資料表
`color-colrv0`	透過 COLR 版本 0 表實現的多色字形
`color-colrv1`	透過 COLR 版本 1 表實現的多色字形
`color-sbix`	標準點陣圖圖形表
`color-svg`	SVG 多色表
`features-aat`	TrueType `morx` 和 `kerx` 表
`features-graphite`	Graphite 特性，即 `Silf`、`Glat`、`Gloc`、`Feat` 和 `Sill` 表
`features-opentype`	OpenType `GSUB` 和 `GPOS` 表
`incremental`	增量字型載入
`palettes`	透過 `font-palette` 實現的字型調色盤，用於在字型中選擇多個調色盤之一
`variations`	TrueType 和 OpenType 字型中的字型變體，用於控制字型軸、字重、字形等

正式定義

相關的 at-rule	`@font-face`
初始值	`n/a（必需）`
計算值	同指定值

正式語法

src = 
  <font-src-list>

<font-src> = 
  <url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?  |
  local( <family-name> )                              

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<family-name> = 
  <string>         |
  <custom-ident>+  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT

示例

使用 url() 和 local() 指定字型資源

下面的示例展示瞭如何為同一個字型族定義兩個字型。font-family 命名為 MainText。第一個字型是常規字型，第二個是同一字型族的粗體版本。

css

/* Defining a regular font face */
@font-face {
  font-family: "MainText";
  src:
    local("Futura-Medium"),
    url("FuturaMedium.woff") format("woff"),
    url("FuturaMedium.otf") format("opentype");
}

/* Defining a different bold font face for the same family */
@font-face {
  font-family: "MainText";
  src:
    local("Gill Sans Bold") /* full font name */,
    local("GillSans-Bold") /* postscript name */,
    url("GillSansBold.woff") format("woff"),
    url("GillSansBold.otf") format("opentype"),
    url("GillSansBold.svg#MyFontBold"); /* Referencing an SVG font fragment by id */
  font-weight: bold;
}

/* Using the regular font face */
p {
  font-family: "MainText", sans-serif;
}

/* Font-family is inherited, but bold fonts are used */
p.bold {
  font-weight: bold;
}

使用 tech() 和 format() 值指定字型資源

以下示例展示瞭如何使用 tech() 和 format() 值來指定字型資源。使用 tech() 和 format() 值指定了一個使用 color-colrv1 技術和 opentype 格式的字型。如果使用者代理支援彩色字型，則會啟用它，並提供一個 opentype 非彩色字型作為回退。

css

@font-face {
  font-family: "Trickster";
  src:
    url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
    url("trickster-outline.otf") format(opentype);
}

/* Using the font face */
p {
  font-family: "Trickster", fantasy;
}

為舊版瀏覽器指定回退

瀏覽器應使用帶有一個 src 描述符的 @font-face，其中列出了字型可能的來源。由於瀏覽器將使用它能夠載入的第一個資源，因此應按你希望它們被使用的優先順序列出各項。

通常這意味著本地檔案應出現在遠端檔案之前，帶有 format() 或 tech() 約束的資源應出現在沒有這些約束的資源之前（否則總是會選擇約束較少的版本）。例如：

css

@font-face {
  font-family: "MgOpenModernaBold";
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

不支援上述 tech() 的瀏覽器應忽略第一項並嘗試載入第二個資源。

一些瀏覽器尚未忽略無效項，如果任何值無效，它們會使整個 src 描述符失效。如果使用這些瀏覽器，你可以指定多個 src 描述符作為回退。請注意，多個 src 描述符會按相反順序嘗試，所以在最後我們有包含所有項的正常描述符。

css

@font-face {
  font-family: "MgOpenModernaBold";
  src: url("MgOpenModernaBold.otf") format(opentype);
  src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental);
  src:
    url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental),
    url("MgOpenModernaBold.otf") format(opentype);
}

檢查使用者代理是否支援某種字型

以下示例展示瞭如何使用 @supports 規則檢查使用者代理是否支援某種字型技術。如果使用者代理支援 color-COLRv1 技術，則 @supports 內部的 CSS 塊將被應用。

css

@supports font-tech(color-COLRv1) {
  @font-face {
    font-family: "Trickster";
    src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
  }

  .colored_text {
    font-family: "Trickster", fantasy;
  }
}

規範

規範
CSS 字型模組第 4 級 # src-desc

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 13 日⁩，由 MDN 貢獻者們撰寫。

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