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>

打印页面