CSS3 Web字体

CSS @font-face 规则

CSS中的 @font-face 可以让网页使用互联网上或者服务器上的字体，而非用户计算机上已经安装的字体。

你需要做的就是使用 CSS 中的 @font-face 规则中进行定义需要使用的字体文件。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

使用字体

在CSS3的 @font-face 规则中：首先定义字体的名称（例如 myFont），然后指向该字体文件。

注意：字体的 URL 始终使用小写字母。大写字母可能会在 IE 中产生不可预知的结果。

在HTML网页中，通过 font-family 属性引用字体名称（myFont）：

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

div {
  font-family: myFont;
}

使用粗体文本

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

示例

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

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

每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。

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

CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：