翻译不完整。 请帮助我们翻译这篇文章!

@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


/* <url> values */
src: url(; /* 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");


<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.
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> ) ]#

<family-name> = <string> | <custom-ident>+


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


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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
srcChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 6Opera Full support 10Safari Full support 3.1WebView Android Full support 2.2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
Support for format keywordsChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 4WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 5Samsung Internet Android No support No


Full support  
Full support
No support  
No support