CSS @font-face 规则

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

实例

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

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}
</style>
</head>
<body>
<h2>@font-face 规则</h2>
<div>通过 CSS，网站终于可以使用除预先选择的“网络安全”字体以外的其他字体。</div>
</body>
</html>

运行一下

定义和用法

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

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

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

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体的名称（myFirstFont）：

div {
  font-family: myFirstFont;
}

浏览器支持

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）。

语法

@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 规则，其中包含粗体文本的描述符：

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: myFirstFont;
  src: url(/example/css/sansation_light.woff);
}
@font-face {
  font-family: myFirstFont;
  src: url(/example/css/sansation_bold.woff);
  font-weight: bold;
}
div {
  font-family: myFirstFont;
}
</style>
</head>
<body>
<h2>@font-face 规则</h2>
<div>通过 CSS，网站终于可以使用除预先选择的“网络安全”字体以外的其他字体。</div>
</body>
</html>

运行一下

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

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

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

CSS @font-face 规则

实例

定义和用法

浏览器支持

语法

更多实例

实例

相关页面

分类导航