CSS Web 字体
CSS @font-face 规则
Web 字体允许网页设计师使用用户计算机上未安装的字体。
当您找到/购买了希望使用的字体后，只需将字体文件放在您的 Web 服务器上，它就会在需要时自动下载到用户那里。
您自己的字体是在 CSS @font-face 规则中定义的。
不同的字体格式
TrueType 字体 (TTF)
TrueType 是由 Apple 和 Microsoft 在 20 世纪 80 年代末开发的一种字体标准。TrueType 是 Mac OS 和 Microsoft Windows 操作系统最常见的字体格式。
OpenType 字体 (OTF)
OpenType 是一种可缩放计算机字体的格式。它基于 TrueType 构建，是 Microsoft 的注册商标。OpenType 字体今天在主要的计算机平台上普遍使用。
Web Open Font Format (WOFF)
WOFF 是一种用于网页的字体格式。它于 2009 年开发，现已成为 W3C 推荐。WOFF 本质上是带有压缩和附加元数据的 OpenType 或 TrueType。其目标是在带宽受限的网络上支持字体从服务器到客户端的传输。
Web Open Font Format (WOFF 2.0)
TrueType/OpenType 字体，比 WOFF 1.0 提供更好的压缩效果。
SVG 字体/形状
SVG 字体允许在显示文本时使用 SVG 作为字形。SVG 1.1 规范定义了一个字体模块，允许在 SVG 文档中创建字体。您也可以将 CSS 应用于 SVG 文档，并且 @font-face 规则可以应用于 SVG 文档中的文本。
嵌入式 OpenType 字体 (EOT)
EOT 字体是 OpenType 字体的紧凑形式，由 Microsoft 设计，用于在网页上嵌入字体。
浏览器对字体格式的支持
表中的数字表示完全支持该字体格式的第一个浏览器版本。
| 字体格式 | |||||
|---|---|---|---|---|---|
| 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：字体格式仅在设置为“可安装”时才有效。
使用您想要的字体
在 @font-face 规则中；首先为字体定义一个名称（例如 myFirstFont），然后指向字体文件。
提示： 字体 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;
}
自己动手试一试 »
文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。
每当需要将字体系列为 "myFirstFont" 的文本呈现为粗体时，浏览器将使用此文件。
这样，您就可以为同一字体拥有多个 @font-face 规则。
CSS 字体描述符
下表列出了可以在 @font-face 规则中定义的所有字体描述符
| 描述符 | 值 | 描述 |
|---|---|---|
| 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 斜体 倾斜 |
可选。定义字体的样式。默认值为 "normal" |
| font-weight | normal 粗体 100 200 300 400 500 600 700 800 900 |
可选。定义字体的粗细。默认值为 "normal" |
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符的范围。默认值为 "U+0-10FFFF" |
