前端必知必会-CSSweb字体

---

CSS Web 字体

CSS @font-face 规则
Web 字体允许 Web 设计人员使用用户计算机上未安装的字体。

当您找到/购买了想要使用的字体后，只需将字体文件包含在您的 Web 服务器上，系统会在需要时自动将其下载给用户。

您的“自己的”字体在 CSS @font-face 规则中定义。

不同的字体格式

TrueType 字体 (TTF)

TrueType 是 Apple 和 Microsoft 于 20 世纪 80 年代末开发的一种字体标准。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 字体，可用作网页上的嵌入式字体。

使用您想要的字体

在@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 italic oblique	可选。定义字体的样式。默认为“normal”
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认为“normal”
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认为“U+0-10FFFF”

---

总结

本文介绍了CSSweb字体的使用，如有问题欢迎私信和评论