CSS3 字体

CSS Web 字体

在你的网站上使用自定义字体

@font-face 规则

Web 字体允许设计人员和开发人员使用未预装在用户计算机上的字体，从而确保在不同设备上排版的一致性。

CSS @font-face 规则允许你指定要与你的网站资源一起下载的自定义字体。

一旦你合法获取了字体文件（例如，来自 Google Fonts、Adobe Fonts 或购买了许可证），你就可以将它们托管在你的服务器上（或使用托管服务），并使用 @font-face 定义它们。

浏览器对 @font-face 的支持

@font-face 规则本身得到了所有现代浏览器的支持。

特性	Chrome	Edge	Firefox	Safari	Opera
@font-face	Chrome 4+	Edge 12+	Firefox 3.5+	Safari 3.2+	Opera 10+

然而，浏览器对不同字体格式的支持有所不同。

常见的 Web 字体格式

WOFF2 (Web Open Font Format 2.0)

最推荐的格式。提供最佳的压缩和性能。基于 TrueType (TTF) 或 OpenType (OTF)。

WOFF (Web Open Font Format)

先前的标准。本质上是带有元数据的 TTF/OTF 的压缩版本。对于不支持 WOFF2 的旧浏览器来说，是非常好的回退方案。

TTF/OTF (TrueType/OpenType 字体)

标准的桌面字体格式。压缩率低于 WOFF/WOFF2，导致文件大小更大。如有必要，可作为极旧浏览器的回退方案。

EOT (Embedded OpenType) 和 SVG 字体

这些格式在 Web 字体使用中已基本过时。EOT 专用于较旧的 Internet Explorer 版本。SVG 字体存在可访问性和性能问题，并且缺乏广泛支持。除非目标用户使用极旧的浏览器，否则应避免使用这些格式。

浏览器对字体格式的支持

专注于提供 WOFF2 和 WOFF，以获得现代支持和兼容性的最佳组合。

字体格式	Chrome	Edge	Firefox	Safari	Opera
WOFF2	Chrome 36+	Edge 14+	Firefox 39+	Safari 10+	Opera 26+
WOFF	Chrome 5+	Edge 12+	Firefox 3.6+	Safari 5.1+	Opera 11.1+
TTF/OTF	Chrome 4+	Edge 12+	Firefox 3.5+	Safari 3.1+	Opera 10+

注意：在旧版本的 IE 中，TTF/OTF 的支持可能存在许可限制（‘installable’ 设置），但这在今天已经不太重要了。

使用 @font-face

在 @font-face 规则内部，你使用 font-family 定义字体的自定义名称，并使用 src 描述符指向字体文件。提供多种格式以获得更广泛的兼容性，首选格式 (WOFF2) 应放在最前面。

最佳实践提示：字体 URL 应始终使用小写，并确保文件路径相对于你的 CSS 文件是正确的。

定义自定义字体 ‘MyCustomFont’ 的示例：

@font-face {
  font-family: 'MyCustomFont'; /* 你将在 CSS 中使用的名称 */
  src:
    /* 现代浏览器 */
    url('fonts/mycustomfont-regular.woff2') format('woff2'),
    /* 旧浏览器 */
    url('fonts/mycustomfont-regular.woff') format('woff');
  /* 可选：如果不是标准样式，定义字重和样式 */
  font-weight: normal;
  font-style: normal;
  /* 可选：提高加载性能 */
  font-display: swap;
}

要将此字体应用于元素，请使用你定义的 font-family 名称：

body {
  font-family: 'MyCustomFont', sans-serif; /* 回退字体 */
}

h1 {
  font-family: 'MyCustomFont', Georgia, serif;
}

强烈建议使用 font-display: swap;。它会告诉浏览器在自定义字体加载时立即显示回退字体，从而防止文本不可见（FOIT - Flash of Invisible Text，文本不可见闪烁）。

定义粗体和斜体样式

要使用你的自定义字体的粗体、斜体或其他字重/样式，你需要为每种变体提供单独的字体文件以及相应的 @font-face 规则。

定义每种变体时使用相同的 font-family 名称，但在各自的 @font-face 规则内指定正确的 font-weight 和 font-style 值。

@font-face {
  font-family: 'MyCustomFont';
  src:
    url('fonts/mycustomfont-regular.woff2') format('woff2'),
    url('fonts/mycustomfont-regular.woff') format('woff');
  font-weight: 400; /* 400 是正常 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src:
    url('fonts/mycustomfont-bold.woff2') format('woff2'),
    url('fonts/mycustomfont-bold.woff') format('woff');
  font-weight: 700; /* 700 是粗体 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src:
    url('fonts/mycustomfont-italic.woff2') format('woff2'),
    url('fonts/mycustomfont-italic.woff') format('woff');
  font-weight: 400; /* 正常字重 */
  font-style: italic;
  font-display: swap;
}

现在，当你对使用 ‘MyCustomFont’ 的元素应用 font-weight: bold; 或 font-style: italic; 时，浏览器会自动选择在相应 @font-face 规则中定义的适当字体文件。

.some-element {
  font-family: 'MyCustomFont', sans-serif;
  font-weight: bold; /* 使用 mycustomfont-bold.woff2/woff */
}

em {
  font-family: 'MyCustomFont', sans-serif;
  font-style: italic; /* 使用 mycustomfont-italic.woff2/woff */
}

@font-face 描述符

@font-face 规则中使用的关键描述符：

描述符	值	描述
font-family	string	必需。定义你将在 CSS 中引用此字体的名称。
src	url() [format()] list	必需。指定字体文件的路径。包含 format() 提示（例如，‘woff2’、‘woff’）以进行优化。
font-weight	normal | bold | 100-900	可选。指定此字体文件对应的字重。默认值为 normal (400)。
font-style	normal | italic | oblique	可选。指定此字体文件对应的样式。默认值为 normal。
font-display	auto | block | swap | fallback | optional	可选。控制字体在加载时的显示方式。通常推荐使用 swap。默认值为 auto。
font-stretch	normal | condensed | expanded | …	可选。指定此字体文件对应的拉伸值（宽度变化）。默认值为 normal。
unicode-range		可选。指定此字体支持的 Unicode 字符范围。用于优化，仅加载特定字符集的字体。

详细信息请参阅：MDN @font-face 文档