CSS

@font-face.src

@font-face.src

@font-facesrcCSS描述符指定包含字体数据的资源。@font-face规则必须是有效的。

它的值是一个优先级,逗号分隔的外部引用列表或本地安装的字体名称。当需要字体时,用户代理会迭代使用第一个引用列出的引用集,并可以成功激活该引用。包含无效数据或未找到本地字体的字体将被忽略,用户代理将加载列表中的下一个字体。

与CSS中的其他URL一样,URL可能是相对的,在这种情况下,它将相对于包含该@font-face规则的样式表的位置进行解析。对于SVG字体,URL指向包含SVG字体定义的文档中的元素。如果省略元素引用,则隐含对第一个定义字体的引用。同样,可以包含多个字体的字体容器格式只能加载给定@font-face规则的一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案,则使用简单的基于1的索引方案(例如,第一字体的“字体集合#1”,第二字体的“字体集合#2”)。

Related at-rule@font-face
初始值n/a (required)
使用媒体all
计算值as specified
规范顺序order of appearance in the formal grammar of the values

语法

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

取值

<url> [ format( <string># ) ]?指定由URL组成的外部参考,后跟可选提示,描述由该URL引用的字体资源的格式。格式提示包含一个逗号分隔的格式字符串列表,表示已知的字体格式。如果用户代理不支持指定的格式,则跳过下载字体资源。如果没有提供格式提示,则始终下载字体资源。<font-face-name>使用该local()函数指定本地安装的字体的名称,该函数唯一标识较大族中的单个字体。该名称可以选择性地用引号引起来。

形式语法

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

实例

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

规范

SpecificationStatusComment
CSS Fonts Module Level 3The definition of 'src' in that specification.Candidate RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.012.03.5 (1.9.1)6.09.03.1
WOFF5.0?3.6 (1.9.2)9.011.15.1
WOFF 236.0?35.0 (35.0)1No support26.0No support
TrueType4.0?3.5 (1.9.1)9.010.03.1
OpenType4.0?3.5 (1.9.1)9.010.03.1
Embedded OpenTypeNo support?No support6.0No supportNo support
SVG Font4.0?No support2No support9.03.2

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support2.21.0 (1.9.1)10.0No support12.03.1
WOFF??????
WOFF 2??????
TrueType??????
OpenType??????
Embedded OpenType??????
SVG Font??????