CSS Web 字体 详解
CSS Web 字体
CSS @font-face 规则
Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。
当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，它将在需要时自动下载给用户。
您的“自有”字体在 CSS @font-face 规则中进行定义。
不同的字体格式
TrueType 字体 (TTF)
TrueType 是 1980 年代后期由 Apple 和 Microsoft 开发的字体标准。 TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常用的字体格式。
OpenType 字体 (OTF)
OpenType 是可缩放计算机字体的格式。它基于 TrueType 构建，并且是 Microsoft 的注册商标。今天，OpenType 字体在主要计算机平台上得到普遍使用。
Web 开放字体格式 (WOFF)
WOFF 是用于网页的字体格式。它于 2009 年开发，现已成为 W3C 的推荐标准。 WOFF 本质上是具有压缩和其他元数据的 OpenType 或 TrueType。目标是支持在有带宽限制的网络上从服务器到客户端进行字体分发。
Web 开放字体格式 (WOFF 2.0)
TrueType/OpenType 字体比 WOFF 1.0 提供更好的压缩。
SVG 字体/形状
SVG 字体允许在显示文本时将 SVG 用作字形。 SVG 1.1 规范定义了一个字体模块，该模块允许在 SVG 文档中创建字体。您还可以将 CSS 应用于 SVG 文档，同时 @font-face 规则可以应用于 SVG 文档中的文本。
嵌入式 OpenType 字体 (EOT)
EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。
对字体格式的浏览器支持
表格中的数字注明了完全支持该字体格式的首个浏览器版本。
| 字体格式 | |||||
| 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 | 不支持 | 不支持 | 不支持 | 3.2 | 不支持 |
| EOT | 6.0 | 不支持 | 不支持 | 不支持 | 不支持 |
*IE：该字体格式仅在设置为 "installable" 时有效。
*Firefox：默认情况下不支持，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。
使用您需要的字体
在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。
提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。
如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：
示例代码：
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>
通过 CSS，网站可以使用<b>预选的 "web-safe" 字体以外的其他字体</b>。
</div>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 @font-face 规则。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用粗体文本
您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：
示例代码：
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
* {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>@font-face 规则</h1>
<div>
通过 CSS，网站可以使用<b>预选的 "web-safe" 字体以外的其他字体</b>。
</div>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 @font-face 规则。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。
每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。
这样，您就可以为同一字体设置许多 @font-face 规则。
CSS 字体描述
下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。定义字体名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch |
|
可选。定义应如何拉伸字体。默认值是 "normal"。 |
| font-style |
|
可选。定义字体的样式。默认值是 "normal"。 |
| font-weight |
|
可选。定义字体的粗细。默认值是 "normal"。 |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认值是 "U+0-10FFFF"。 |
