这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@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 thelocal()syntax. If that font isn't found, other sources will be tried until one is found. font-variant- A
font-variantvalue. font-stretch- A
font-stretchvalue. font-weight- A
font-weightvalue. font-style- A
font-stylevalue. unicode-range- The range of unicode code points defined in the font-face rule.
示例
下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://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.