src - CSS（层叠样式表） 编辑

@font-face 中的src描述符指定了包含字体数据的资源。@font-face 规则中需要指定这个属性。

它的值是一个有优先级的，以逗号分割的外部引用或者本地安装的字体名称。当需要使用字体时，用户代理（指浏览器的意思）将会使用以逗号分隔的参考集中能成功激活的第一个参考值。如果是包含无效数据的字体或者本地的字体资源不存在，用户代理将会忽略当前字体并且加载下一个字体。

与CSS中的其他URL一样，URL可以是相对的，在这种情况下，它相对于包含@ font-face规则的样式表的位置进行解析。对于SVG字体，URL指向文档中定义的包含SVG字体的元素。如果省略元素引用，则默认引用第一个定义字体。同样，字体容器只加载@font-face 规则给定的其中一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案，将会使用一个简单的基于1的索引方案（e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.）

Related at-rule	@font-face
初始值	n/a (required)
计算值	as specified

Syntax

/* <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) format("woff");          /* Explicit format */
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 */

/* Multiple items */
src: local(font), url(path/to/font.svg) format("svg"),
     url(path/to/font.woff) format("woff"),
     url(path/to/font.otf) format("opentype");

Values

<url> [ format( <string># ) ]?

Specifies an external reference consisting of a <url>, followed by an optional hint using the format() function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.

<font-face-name>

Specifies the name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.

Formal syntax

[ <url> [ format( <string># ) ]? | local( <family-name> ) ]#
where 
<family-name> = <string> | <custom-ident>+

Examples

@font-face {
  font-family: examplefont;
  src: local(Example Font),
       url('examplefont.woff') format("woff"),
       url('examplefont.otf') format("opentype");
}

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3 src	Candidate Recommendation	Initial definition

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.