这篇翻译不完整。请帮忙从英语翻译这篇文章

@font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。
 
通过允许作者提供他们自己的字体,@font-face 让设计内容成为了一种可能,同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体,同时在不依赖网络情况下实现此功能。
 
在同时使用url()和local()功能时,为了用户已经安装的字体副本在需要使用时被使用,如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
 
@font-face 规则不仅仅使用在CSS的顶层,还可以用在任何CSS条件组规则中.
 
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

概述

这是一个叫做@font-faceCSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

语法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

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

取值

font-family
所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )
src
远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体,将会尝试其他来源,直到找到它。
font-variant
A font-variant value.
font-stretch
A font-stretch value.
font-weight
A font-weight value.
font-style
对于src所指字体的描述。如果所需字体符合描述,则采用本font-face所定义的字体。
unicode-range
在该@font-face中定义的unicode字体范围

示例

下面的例子简单定义了一个可下载的字体,并应用到了文档的整个body标签上。

View live sample

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

 

在接下来的例子中,用到了用户本地字体"Helvetica Neue Bold"的备份;如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过),就会用下载的字体"MgOpenModernaBold.ttf"来代替:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

 

接下来的例子在英文原文中已被删除。

这个例子新定义了一个字体,正常粗细的字采用字体Times New Roman,粗体字采用Consolas。

@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}

注意

  • 这里使用的Web fonts 仍然受到同域限制  (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
  • 因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME,因此不能为这些字体类型设置特定的MIME(实际上WOFF的MIME将会是application/font-woff,但浏览器对此MIME的识别还不统一,其它字体情况也类似,可暂时使用application/octet-stream)。 
  • 你不能在一个 CSS 选择器中定义 @font-face 。例如,这样写是无效的:
    .className { 
      @font-face { 
        font-family: MyHelvetica; 
        src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
            url(MgOpenModernaBold.ttf);
        font-weight: bold; 
      } 
    }

规范

Specification Status Comment
WOFF File Format 2.0
WOFF2 font format
Recommendation Font format specification with new compression algorithm
WOFF File Format 1.0
WOFF font format
Recommendation Font format specification
CSS Fonts Module Level 3
@font-face
Candidate Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@font-faceChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support Yes
SVG fonts
DeprecatedNon-standard
Chrome No support 1 — 38Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 25Safari Full support 3.2WebView Android No support ≤37 — 38Chrome Android No support 18 — 38Firefox Android No support NoOpera Android No support 14 — 25Safari iOS Full support 3Samsung Internet Android No support 1.0 — 3.0
WOFFChrome Full support 6Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 11.1Safari Full support 5.1WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.1Safari iOS Full support 5Samsung Internet Android Full support Yes
WOFF 2Chrome Full support 36Edge Full support 14Firefox Full support 39
Full support 39
Full support 35
Disabled
Disabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 23Safari Full support 10
Notes
Full support 10
Notes
Notes Supported only on macOS 10.12 (Sierra) and later.
WebView Android Full support 37Chrome Android Full support 36Firefox Android Full support 39
Full support 39
Full support 35
Disabled
Disabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 24Safari iOS Full support 10Samsung Internet Android Full support 3.0
font-displayChrome Full support 72Edge No support NoFirefox Full support 58IE No support NoOpera Full support 60Safari Full support 11.1WebView Android Full support 72Chrome Android Full support 72Firefox Android Full support 58Opera Android Full support 51Safari iOS Full support 11.1Samsung Internet Android No support No
font-familyChrome 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 Yes
font-feature-settingsChrome No support NoEdge No support NoFirefox Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Notes
Full support 34
Notes
Notes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
font-stretchChrome Full support 62Edge Full support 17Firefox Full support 62IE No support NoOpera Full support 49Safari Full support 10.1WebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 62Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0
font-styleChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support Yes
font-variation-settingsChrome Full support 62Edge No support NoFirefox Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49Safari No support NoWebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 60
Disabled
Full support 60
Disabled
Disabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support YesSafari iOS No support NoSamsung Internet Android No support No
font-weightChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 4Opera Full support 10Safari Full support 3.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 2Samsung Internet Android Full support Yes
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 Yes
unicode-rangeChrome Full support 1Edge Full support 12Firefox Full support 36IE Full support 9Opera Full support YesSafari Full support 3.2WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 36Opera Android Full support YesSafari iOS Full support 3Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参考

文档标签和贡献者

标签: 
最后编辑者: 1v9,