CSS @font-face - src

用於 @font-face 規則的 CSS 描述符 src 指定包含字型資料的資源。它是 @font-face 規則有效的必填描述符。

可能的值

src CSS 描述符可以具有以下值之一

<url>()：指定所需字體面的外部引用。
- 由 <url>() 組成，後面跟著可選的元件值 format() 和 tech()，指定格式和字型技術。
- 這些元件是一個逗號分隔的列表，稱為字型格式和技術。
- 當用戶代理不支援任何字型技術或格式時，將跳過字型資源的下載。
- 當沒有提供字型技術或格式提示時，字型資源將始終下載。
format()：一個可選的字型格式提示，位於 <url>() 值之後。
- 當字型格式值不受支援或無效時，將跳過字型資源的下載，從而節省頻寬。
- 當沒有提供字型格式提示時，字型資源將被下載，然後檢測格式。本文件後面列出了格式的不同值。
local(<font-face-name>)：指定使用者裝置上應可用的字體面名稱。名稱可以包含或不包含引號。

注意：<font-face-name> 用於匹配 OpenType 和 TrueType 字型中可用的本地字型的 Postscript 名稱或完整字型名稱。名稱的型別因平臺和字型而異，因此應包含這兩個名稱以確保跨所有平臺正確匹配。對於給定的字型名稱，不得使用平臺替換。

注意：有一組預安裝的字型，對於特定裝置的所有使用者而言都是相同的，但使用者安裝的字型並不相同。為使用使用者安裝字型的裝置構建了一個指紋；這反過來又可以幫助網站跟蹤網路上的使用者。因此，為了解決這種情況，使用者代理在使用 local() 時可能會忽略這些使用者安裝的字型。

語法

以下是宣告 src 描述符的不同方法

<url> 值

src: url(https://fonts.google.com/specimen/Brygada+1918/Brygada1918-Italic.ttf); /* Absolute URL */
src: url(font/Brygada1918-Italic.ttf); /* Relative URL */
src: url("font/Brygada1918-Italic.ttf"); /* Quoted URL */
src: url(path/to/svgFont.svg#example); /* Fragment identifying font */

<font-face-name> 值

src: local(Verdana); /* Unquoted name */
src: local(Arial Bold); /* Name containing space */
src: local("Verdana"); /* Quoted name */
src: local("Arial Bold"); /* Quoted name containing a space */

<tech(<font-tech>)> 值

src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1);
src: url(path/to/fontCOLR-svg.otf) tech(color-SVG);

<format(<font-format>)> 值

src: url(font/Brygada1918-Italic.ttf) format("ttf");
src: url(font/SansationLight.woff) format("woff");

多個資源

src: url(font/Brygada1918-Italic.ttf) format("ttf"),
src: url(font/SansationLight.woff) format("woff");

具有字型格式和技術的多個資源

src: url(path/to/fontCOLR-svg.otf) format("opentype") tech(color-SVG);,
src: url(font/SansationLight.woff) format("woff");

描述

以下幾點說明了 src 描述符的功能。

此描述符中的每個資源都使用 <url>() 或 local() 指定。
src 描述符的值是外部字型檔案或本地安裝的字體面名稱的優先順序和逗號分隔列表。
如果需要字型，使用者代理可以遍歷一組值。第一個成功載入的值將被使用或啟用。
任何無效或不受支援的值（關於外部引用或本地字體面）都將被忽略，並且使用者代理將載入列表中的下一個字型。
當指定多個 src 描述符時，將應用最後一個可載入的已宣告規則。
當最後一個 src 描述符可以載入外部資源並且未列出 local() 字型時，瀏覽器將下載外部字型檔案。即使裝置上可用，本地版本的字型也將被忽略。

包含 @font-face 規則的樣式表可以在 URL 中提供引用。此外，對於 SVG 字型，URL 對應於包含 SVG 定義的文件中的元素。

當字型容器格式包含多個載入時，將指定片段識別符號以指示要載入的字型。如果字型格式不可用片段識別符號方案，則使用簡單的 基於 1 的索引方案，例如，第一個字型為“samplefont-collection#1”，第二個字型為“samplefont-collection#2”，依此類推。

當字型檔案包含多個字型時，將包含一個片段識別符號，指示要使用的子字型，如下所示

/* SampleFont is the PostScript name of a font in the font file */
src: url(collection.otc#SampleFont);

/* SampleFont is the element id of a font in the SVG Font file */
src: url(fonts.svg#SampleFont);

字型格式

下表說明了有效字型關鍵字及其對應字型格式的對映。為了檢查瀏覽器是否支援字型格式，可以使用 @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) 和 tech(color-SVG) 彼此不同，因為前者代表 SVG 字型，後者代表 帶有 SVG 表格的 OpenType 字型。

值 opentype 和 truetype 是等效的，無論字型檔案使用三次貝塞爾曲線（在 CFF/CFF2 表格內）還是二次貝塞爾曲線（在字形表格內）。

下表顯示了 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() 值及其對應技術的對映。為了檢查瀏覽器是否支援字型技術，可以使用 @supports 規則。

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

CSS src - 使用 url()

以下示例演示了@font-face at-rule 的src 描述符的使用，其中資源使用 url()。

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      font-style: italic;
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - 使用 local()

以下示例演示了@font-face at-rule 的src 描述符的使用，其中資源使用 local()。

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: local(Arial Bold);
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - 使用 format()

以下示例演示了@font-face at-rule 的src 描述符的使用，其中資源使用 format()。

<html>
<head> 
<style>
   @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf") format(truetype);
      font-style: italic;
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
      
   <h2>
      Testing font-style.
   </h2>
</body>
</html>

CSS src - 使用 tech()

以下示例演示了@font-face at-rule 的src 描述符的使用，其中資源使用 tech()。

<html>
<head> 
<style>
   @font-face {      
      font-family: "f1";
      src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1);
   }

   h1 {
      font-family: "f1";
   }
</style>
</head>
<body>
   <h1>Font Technology</h1>
</body>
</html>

列印頁面