@font-face

这是一个叫做@font-face的CSS@规则，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在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-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)