CSS 字体

CSS 字体模块定义了与字体相关的属性以及字体资源的加载方式。它允许您定义字体的样式，例如字体族、大小和字重，以及当单个字符有多种字形变体时要使用的字形变体。

字体是包含字符视觉表示的资源文件，它将字符代码映射到表示字母、数字、标点符号甚至表情符号的字形。字体家族是一组共享共同设计风格和字体属性的字体，该组中的每个成员都以不同的方式显示字形，其笔画粗细、倾斜或相对宽度等属性各不相同。字体通常表示一种字体的单一样式，例如粗斜体 Helvetica。字体家族是完整的样式集。在文档或设计中包含此类字体是通过为每个字体资源定义单独的 @font-face 声明来完成的。

CSS 字体模块的属性、at-rule 和描述符支持下载字体的多个变体。它们还定义了用于特定字体特征的字体文件，以及在资源加载失败时的备用指令。CSS 字体选择机制描述了将给定 CSS 字体属性集与单个字体字面匹配的过程。

CSS 字体模块还支持可变字体。与常规字体不同，常规字体中每种样式都作为一个单独的字体文件实现，而可变字体可以将所有样式包含在一个文件中。通过使用单个 @font-face 声明，您可以导入包含所有样式的可变字体。根据字体，这可能包括多种字体变体。可变字体是 OpenType 字体规范的一部分。

参考

属性

该规范还定义了 font-width 属性，该属性尚未得到任何浏览器的支持。

At-rule 和描述符

At-rule: @font-face

描述符

CSS 字体模块还定义了 font-language-override、font-named-instance、font-width、font-size、subscript-position-override、subscript-size-override、superscript-position-override 和 superscript-size-override 描述符。目前，没有浏览器支持这些功能。

At-rule: @font-feature-values

CSS 字体模块还定义了 font-display 描述符。目前，没有浏览器支持此功能。

At-rule: @font-palette-values

描述符

数据类型

font-size 类型

font-family 类型

<generic-family>

font-feature-settings 类型

<feature-tag-value>

font-format 类型

<font-format>

font-stretch 类型

<font-stretch-css3>

font-tech 类型

font-variant 类型

font-variant-ligatures 类型

font-variant-numeric 类型

font-weight 类型

<font-weight-absolute>

接口

指南

学习：基础文本和字体样式: 这篇入门学习文章涵盖了文本和字体样式设置的基本原理。它涵盖了如何使用 font 简写属性设置字体字重、字体家族和样式，以及如何对齐文本和管理行高和字间距。
学习：Web 字体: 这篇入门学习文章解释了如何在网页上使用自定义字体，以实现更多样化和自定义的文本样式。
OpenType 字体功能: 字体功能或变体指的是 OpenType 字体中包含的不同字形或字符样式。这些包括连字（将“fi”或“ffl”等字符组合起来的特殊字形）、字距调整（调整特定字母形状配对之间的间距）、分数、数字样式以及其他一些功能。所有这些都称为 OpenType 功能，并通过特定的属性和低级控制属性（font-feature-settings）在 Web 上可用。本文为您提供了在 CSS 中使用 OpenType 字体功能所需的所有知识。
可变字体: 本文将帮助您开始使用可变字体。
提高字体性能: 本文是 CSS 性能指南的一部分，讨论了字体加载、仅加载所需字形以及使用 font-display 描述符定义字体显示行为。

规范

规范
CSS 字体模块第 4 级

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 8 月 4 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题