CSS @font-face 规则

定义和用法

通过使用 @font-face 规则,Web 设计师不必再使用任何一种“网络安全”字体。

在 @font-face 规则中,您必须首先定义字体名称(例如 myFirstFont),然后指向字体文件。

提示:字体的 URL 使用小写字母。大写字母可能会在 IE 中产生意外结果!

如需将字体用于 HTML 元素,请通过 font-family 属性引用字体的名称(myFirstFont):

div {
  font-family: myFirstFont;
}

另请参阅:

CSS 教程:CSS Web 字体

实例

指定一种名为 "myFirstFont" 的字体,并规定可以找到它的 URL:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

亲自试一试

可以在页面下方找到更多 TIY 实例。

CSS 语法

@font-face {
  font-properties
}
字体描述符 描述
font-family name 必需。定义字体名称。
src URL 必需。定义下载字体的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
可选。定义应如何拉伸字体。默认值是 "normal"。
font-style
  • normal
  • italic
  • oblique
可选。定义字体样式。默认值是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认值是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 Unicode 字符范围。默认值是 "U+0-10FFFF"。

更多实例

实例

您必须添加另一个 @font-face 规则,其中包含粗体文本的描述符:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

亲自试一试

文件 "sansation_bold.woff" 是另一个字体文件,其中包含 Sansation 字体的粗体字符。

每当设置字体族 "myFirstFont" 的一段文本应呈现为粗体时,浏览器就会使用它。

这样,您可以为同一字体设置多个 @font-face 规则。

浏览器支持

Internet Explorer、Firefox、Opera、Chrome 和 Safari 都支持 @font-face 规则。

表格中的数字注明了完全支持字体格式的首个浏览器版本。

字体格式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Not supported Not supported Not supported 3.2 Not supported
EOT 6.0 Not supported Not supported Not supported Not supported

* Edge 和 IE: 字体格式仅在设置为 "installable" 时有效

* Firefox:默认情况下是禁用的,但可启用(需要将 flag 设置为 "true" 才能使用 WOFF2)。