CSS @font-face 规则
说明
@font-face 规则用于将样式表中要使用的字体名称与某些可下载字体相关联。 在规则中使用 font-family 描述符来命名字体，而 src 描述符与外部字体名称相关联。
语法
此规则的语法如下所示：
| @font-face: | font-description |
@font-face 规则包含一个或多个属性声明，就像常规 CSS 中的那些，称为字体描述符。 您最多可以指定 24 个不同的属性，但是对它们进行全部解释超出了本参考的范围 — 要了解更多信息，请访问 W3C CSS 字体模块 页面。
@font-face 规则的一般形式是：
@font-face {
font-family: fontname;
src: url(fontfile path);
}
稍后，该字体可以用作 font-family 和 font 等属性中的名称，但您应该指定其他字体名称作为备用字体，以防不支持可下载字体或由于某种原因无法加载字体。
下面的示例显示了 @font-face 属性的作用。
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
font-family: "OpenSans", Arial, sans-serif;
font-size: 1.2em;
}
注意：通过使用@font-face 规则，您无需依赖用户在其计算机上安装的有限数量的字体。
当设置了特定字体特征（如粗体或斜体）时，还可以通过将相应规则添加到 @font-face 来设置特定可下载字体的选择。
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansBold";
src: url("../fonts/OpenSans-Bold.eot");
src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
font-family: "OpenSansBold", Arial, sans-serif; /* Specify the OpenSans bold font */
}
p {
font-family: "OpenSans", Arial, sans-serif;
}参数
Parameters have the following meanings:
| 参数 | 值 | 说明 |
|---|---|---|
| Required — 以下参数是必需的。 | ||
font-family |
font-family |
定义将用作字体属性的 font-family 值的字体名称。 |
src |
url |
指定要使用的字体文件的位置。 |
| Optional — 以下参数是可选的。 | ||
font-style |
font-style |
一个有效的 font-style 属性值。 |
font-weight |
font-weight |
一个有效的 font-weight 属性值（除了相对值，bolder 和 lighter）。 |
浏览器兼容性
所有主要的现代浏览器都支持 @font-face 规则。
 |
基本支持—
|
注意： 对特定字体技术的支持因浏览器而异。 Internet Explorer 支持 .eot 和 .wof 字体，而 Firefox、Chrome、Safari 和 Opera 支持 .woff、.ttf 和 .otf 字体。
进一步阅读
请参阅以下教程： CSS 字体.
Advertisements