src

基线

广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

* 此特性的某些部分的支持程度可能有所不同。

查看完整兼容性
了解更多

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

语法

css

/* <url> 值 */
src: url(https://somewebsite.com/path/to/font.woff); /* 绝对 URL */
src: url(path/to/font.woff); /* 相对 URL */
src: url("path/to/font.woff"); /* 带引号的 URL */
src: url(path/to/svgFont.svg#example); /* 标识字体的片段 */

/* <font-face-name> 值 */
src: local(font); /* 不带引号的名称 */
src: local(some font); /* 带空格的名称 */
src: local("font"); /* 带引号的名称 */
src: local("some font"); /* 带引号、包含空格的名称 */

/* <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(path/to/font.woff) format("woff");
src: url(path/to/font.otf) format("opentype");

/* 多个资源 */
src:
  url(path/to/font.woff) format("woff"),
  url(path/to/font.otf) format("opentype");

/* 多个具有字体格式和技术的资源 */
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>: 使用