@font-face
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}语法
描述符
font-family指定将用作字体属性的字体值的名称。src指定包含字体数据的资源。这可以是远程字体文件位置的URL或用户计算机上的字体名称。font-variant一个font-variant值。font-stretch一个font-stretch值。font-weight一个font-weight值。font-style一个font-style值。unicode-range从字体中使用的Unicode代码点的范围。
形式语法
@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 ]?实例
下面的例子简单定义了一个可下载的字体，并应用到了文档的整个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://mdn.mozillademos.org/files/2468/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;
}注记
- 这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
- 由于TrueType，OpenType和Web开放文件格式（WOFF）字体没有定义的MIME类型，因此不考虑指定的文件的MIME类型。
- @ font-face不能在CSS选择器中声明。例如，以下将不起作用：.className {@ font-face {font-family：MyHelvetica; src：local（“Helvetica Neue Bold”），本地（“HelveticaNeue-Bold”），url（MgOpenModernaBold.ttf）; font-weight：bold; }}
规范
Specification | Status | Comment |
|---|---|---|
WOFF File Format 2.0The definition of 'WOFF2 font format' in that specification. | Candidate Recommendation | Font format specification with new compression algorithm |
WOFF File Format 1.0The definition of 'WOFF font format' in that specification. | Recommendation | Font format specification |
CSS Fonts Module Level 3The definition of '@font-face' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 4.0 | (Yes) | 3.5 (1.9.1) | 4.0 | 10.0 | 3.1 |
WOFF | 6.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 11.10 | 5.1 |
WOFF2 | 38 | (Yes) | 39 (39)1 | No support | 24 | No support |
SVG Fonts2 | (Yes) | No support | No support3 | No support | (Yes) | (Yes) |
unicode-range | (Yes) | (Yes) | 36 (36) | 9.0 | (Yes) | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mini | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.9.1) | ? | No support | 10.0 | (Yes) |
WOFF | 4.4 | (Yes) | 5.0 (5.0) | 10.0 | No support | 11.0 | 5.0 |
WOFF2 | No support | (Yes) | 39.0 (39.0)1 | No support | ? | ? | No support |
SVG Fonts2 | ? | No support | No support3 | ? | No support | 10.0 | (Yes) |
unicode-range | ? | (Yes) | 36.0 (36.0) | ? | No support | ? | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
