CSS Web 字体（Web Fonts）允许我们在网页上使用那些并未安装在用户本地系统中的不同字体。在选定了某个未安装的字体后，我们只需将字体文件包含在 Web 服务器上，它就会在需要时自动下载到用户的浏览器中。
语法：
@font-face {
font details
}
字体格式类型：
字体格式有很多种，我们在下面列出了主要的几种：
- TrueType 字体 (TTF): 无论我们使用的是微软的操作系统还是 Mac 操作系统，TrueType 都是最常用的字体格式。这是微软和苹果在 20 世纪 80 年代末开发的一种字体标准。TrueType 字体将每一个字形描述为一组路径。这里的路径是指通过点和特定的数学公式指定的闭合曲线。举个例子，一个小写的 ‘i’ 有两个路径，一个点是点，另一个是其余部分。像素被用来填充路径以创建最终的字母形式。TrueType 字体格式的优势在于字形是可缩放的，这意味着我们可以将它们设置为任何比例和任何大小。
- OpenType 字体 (OTF): OpenType 是一种基于 TrueType 构建的字体格式。OpenType 字体格式由微软和 Adobe 开发，但它是微软的注册商标。OpenType 字体内部的布局功能是按脚本和语言组织的，这允许单个字体在同一脚本内支持多种书写系统。OpenType 字体格式旨在更好地保护字体数据、提供更广泛的多平台支持等。
- Web 开放字体格式 (WOFF): WOFF 是一种用于网页的字体格式，于 2009 年由 Mozilla 联合 Type Supply、LettError 和其他组织开发。WOFF 本质上是带有压缩和额外元数据的 OpenType 或 TrueType。WOFF 的目标是为了支持在带宽受限的网络环境下，将字体从服务器分发到客户端。WOFF 有两个版本，即 WOFF 和 WOFF2，它们的主要区别在于使用的压缩算法。它们分别由 ‘woff‘ 和 ‘woff2‘ 格式描述符来描述。
- SVG 字体/形状: SVG 代表可缩放矢量图形。当 SVG 最初被指定时，大多数 Web 浏览器并没有完全支持 Web 字体。但是为了正确渲染文本，后来在 SVG 中添加了一种字体描述技术来提供这种能力。它提供了在渲染时将字形信息嵌入到 SVG 中的手段。
- 嵌入式 OpenType 字体 (EOT): 嵌入式 OpenType 文件格式是由微软开发的。EOT 字体是 OpenType 字体的一种紧凑形式，用作网页上的嵌入式字体。它的设计目的是为了使 TrueType 和 OpenType 字体能够链接到网页，以便根据用户的要求下载字体来渲染网页。
字体描述符：
我们可以在 @font-face 规则内部定义描述符。现在让我们来解释一下不同类型的字体描述符。
- font-family: 它用于定义字体的名称。这是 Web 字体能够正常工作所必需的属性。
- src: 它用于定义我们获取字体的 URL。就像 font-family 一样，src 也是必需的。除了这两个字段外，其余的描述符都是可选的。
- font-stretch: 它用于定义字体应该如何被拉伸。默认值是 Normal。不同的字体拉伸值包括 normal（正常）、condensed（压缩）、semi-condensed（半压缩）、ultra-condensed（极压缩）、extra-condensed（特压缩）、expanded（扩展）、semi-expanded（半扩展）、extra-expanded（特扩展）以及 ultra-expanded（极扩展）。
- font-style: 它用于定义字体的不同样式。可以设置的不同样式包括 oblique（倾斜），默认样式是 normal（正常）。
- font-weight: 我们可以使用这个描述符来定义字体的粗细。font-weight 的默认值是 "normal"。表示粗细的不同值有 normal（正常）、bold（粗体），我们也可以给出 100 到 900 之间的数值，增量为 100。
CSS Web 字体示例
示例 1： 本示例说明了 Web 字体的使用。
HTML
@font-face{
font-family: monospace;
src:url(sansation_light.woff);
}
/ Sets font family to monospace /
* {
font-family: monospace;
}
GeeksForGeeks
A computer science portal for geeks.
Great Geek‘s font face example.
`
**输出：**
**示例 2：** 本示例说明了 Web 字体的使用。
HTML
`
@font-face{
/ Set font family to monospace /
font-family:monosp