@font-face

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

概述

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

语法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <uri> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}

where
<family-name> = <string> | <IDENT>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

取值

font-family
Specifies a name that will be used as the font face value for font properties. ( i.e. font-family: <family-name>; )
src
URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.
font-variant
A font-variant value.
font-stretch
A font-stretch value.
font-weight
A font-weight value.
font-style
A font-style value.
unicode-range
The range of unicode code points defined in the font-face rule.

示例

下面的例子简单定义了一个可下载的字体,并应用到了文档的整个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>

In this example, the user's local copy of "Helvetica Neue Bold" is used; if the user doesn't have that font installed (two different names are tried), then the downloadable font named "MgOpenModernaBold.ttf" is used instead:

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

注意

  • 这里使用的Web fonts 仍然受到 同域限制  (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制.

规范

Specification Status Comment
WOFF File Format 2.0
WOFF2 font format
Candidate 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
 

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
WOFF2 39 (39)[1] 38 未实现 24 未实现
SVG Fonts[2] 未实现[3] (Yes) 未实现 (Yes) (Yes)
unicode-range

36 (36)

(Yes) 9.0 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.9.1) ? 未实现 10.0 (Yes)
WOFF 4.4 5.0 (5.0) 10.0 未实现 11.0 5.0
WOFF2 未实现 39.0 (39.0)[1] 未实现 ? ? 未实现
SVG Fonts[2] ? 未实现[3] ? 未实现 10.0 (Yes)
unicode-range ? 36.0 (36.0) ? 未实现 ? (Yes)

[1] Gecko 35 到 Gecko 38的版本中,只在 Aurora 和 Nightly 版本中自动启用对WOFF2 的支持。若用户想在 Beta 和 Release 版本中使用此功能, 需要将 gfx.downloadable_fonts.woff2.enabled 修改为true.

[2] Support for SVG Fonts was dropped in favor of allowing SVG glyphs within OpenType font packages.

[3] For Gecko there was, bug 119490 filed for implementing SVG Fonts, though as SVG Fonts got superseded by SVG glyphs within OpenType font packages, the bug got closed.

Notes

  • 对 嵌入OpenType 字体格式支持并没有放在浏览器兼容性表格中,因为这是一种私有特性。在IE9.0之前,IE只支持这种格式。
  • 因为已经被WOFF取代,TrueType 和 OpenType 也没有被包含在浏览器兼容性表格中。 
  • The same origin policy is not implemented in WebKit based browsers like Safari and Mobile Safari. This was also true for Blink based browsers, until September, 2014 - Chrome 37 and Opera 24.

参考

文档标签和贡献者

标签: 
 此页面的贡献者: TiaossuP, King., fscholz, Go7hic, teoli, xcffl
 最后编辑者: TiaossuP,