CSS Web 字体

Web 字体允许网页直接使用位于网页服务器上的字体，而不再局限于用户计算机必须安装的字体。

网页设计师只需要在 CSS 中使用 @font-face 声明字体，使用起来就像其他字体一样。浏览器显示网页的时候会在需要时自动下载字体给用户。

不同的字体格式

TrueType 字体 (TTF)

TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。

OpenType 字体 (OTF)

OpenType 是一种用于可缩放计算机字体的格式。它基于 TrueType 构建，是 Microsoft 的注册商标。OpenType 字体如今在主要计算机平台上普遍使用。

网络开放字体格式 (WOFF)

WOFF 是一种用于网页的字体格式。它于 2009 年开发，现在是 W3C 推荐标准。WOFF 本质上是带有压缩和附加元数据的 OpenType 或 TrueType。目标是支持在带宽受限的网络上从服务器到客户端的字体分发。

网络开放字体格式 (WOFF 2.0)

提供比 WOFF 1.0 更好的压缩比。

SVG 字体/形状

SVG 字体允许在显示文本时将 SVG 用作字形。SVG 1.1 规范定义了一个字体模块，允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，@font-face 规则可以应用于 SVG 文档中的文本。

嵌入式 OpenType 字体 (EOT)

EOT 字体是一种紧凑形式的 OpenType 字体，由 Microsoft 设计，用作网页上的嵌入字体。

浏览器对字体格式的支持

表中的数字指定了第一个完全支持字体格式的浏览器版本。

!! IE：字体格式仅在设置为“可安装”时才有效。

定义一个字体

在 @font-face 规则中，首先使用 font-family 定义字体的名称 myFirstFont，然后使用 src 指向实际的字体文件。

!! **提示：**始终使用小写字母作为字体 URL。大写字母会在 IE 中产生意想不到的结果。

要为 HTML 元素使用字体，请通过 font-family 属性引用字体名称 (myFirstFont) ：

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

div {
  font-family: myFirstFont;
}

定义粗体字体

为了使用字体的粗体格式，还需要添加另一个 @font-face 包含粗体字体的规则。

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

myFirstFont 保持和普通字体一样，文件 “sansation_bold.woff” 对应的是粗体字体文件。

通过这种方式，可以为相同的字体设置多个 @font-face 规则。