src

基线广泛可用

此功能已得到很好的建立，并且可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中都可用： 2016 年 9 月.

用于 @font-face at-规则的 src CSS 描述符指定包含字体数据的资源。它是 @font-face 规则有效的必要条件。

语法

css

/* <url> values */
src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
src: url(path/to/font.woff); /* Relative URL */
src: url("path/to/font.woff"); /* Quoted 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规则。

关键字	描述
`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 字体中的字体变体，用于控制字体轴、粗细、字形等。

正式定义

相关规则	`@font-face`
初始值	`n/a（必需）`
计算值	如指定

正式语法

<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-patch | incremental-range | incremental-auto ]

<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;
}

/* 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";
}

为旧版浏览器指定回退

浏览器应使用具有单个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";
  }
}

规范

规范
CSS 字体模块级别 4 # src-desc

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。