CSS @font-face - src

at 规则 @font-face 的 CSS 描述符 src 指定包含字体数据的资源。@font-face 规则有效是强制性的描述符。

可能的值

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

<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（） 字体时，浏览器将下载外部字体文件。字体的本地版本将被忽略，即使在设备上可用也是如此。

可以在 URL 中引用包含 @font-face 的样式表。此外，对于 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	OOpenType 集合	.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 字体。

无论字体文件使用三次贝塞尔曲线（在 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（） 值及其相应技术的映射。为了检查浏览器是否支持字体技术，您可以使用 @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, and Sill tables
features-opentype	OpenType、GSUB 和 GPOS 表
incremental	增量字体加载
palettes	字体调色板通过 font-palette 在字体中选择众多调色板之一。
variations	TrueType 和 OpenType 字体中的字体变体，用于控制字体轴、粗细、字形等。

CSS src - 使用 url（）

以下示例演示了如何使用 @font-face at 规则的描述符 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 规则的 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 规则的 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 规则的 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>

打印本页