MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

概述

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

语法

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: [ <url> [ 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> | <custom-ident>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

取值

font-family
所指定的字体名字将会被用于font或font-family属性( 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
对于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
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.

参考

文档标签和贡献者

标签: 
 最后编辑者: Howard.Chen,