排版

最后更新：2026-10-05 15:56:51

排版是网页设计中一个广泛的主题，没有任何一份文档能对其进行详尽的阐述。有许多篇幅如书的著作深入探讨了其中的细节，互联网上也有大量文章详细讲解了最佳实践、技巧和窍门。

本指南将专门帮助您熟悉通过 settings.typography 在 theme.json 中可用的设置。

排版也与主题中的间距紧密相关，因此您需要熟悉间距设置以充分利用这两份指南。您还将将从本文档中学到的内容应用到您的 theme.json 样式中。

启用和禁用排版选项

有几个设置仅用于在用户界面中启用或禁用元素。这些属性中的每一个都接受布尔值，这意味着您可以将它们设置为 true 或 false。

并非每个块都支持所有排版设置。有些是特定于单个块的。例如，dropCap 属性仅适用于段落块。其他则被几乎所有带文本的块广泛使用，例如 customFontSize。

这些 settings.typography 属性允许您在界面中启用或禁用功能：

customFontSize: 是否允许用户输入自定义字体大小。默认为 true。
dropCap: 用户是否可以启用段落块首字母的大写字母（首字下沉）。默认为 true。
fontStyle: 用户是否可以选择自定义字体样式。默认为 true。
fontWeight: 用户是否可以自定义字体粗细。粗细范围对应于标准 Thin 到 Black 的字体粗细。默认为 true。
letterSpacing: 用户是否可以输入自定义字间距值。默认为 false。
lineHeight: 用户是否可以输入文本的自定义行高。无法注册行高预设，因此此选项启用完全自定义输入。默认为 false。
textColumns: 是否为块文本显示列选项。默认为 false。
textDecoration: 用户是否可以设置块的文本装饰。可用选项为 None、Underline 和 Strikethrough。默认为 true。
textTransform: 用户是否可以更改块的文本字母大小写。可用选项为 None、Uppercase、Lowercase 和 Capitalize。默认为 true。
writingMode: 是否启用界面中的文本 Orientation，允许用户在 Horizontal 和 Vertical 文本之间进行选择。默认为 false。

以下是这些排版设置在默认 WordPress theme.json 中的样子：

{
	"version": 2,
	"settings": {
		"typography": {
			"customFontSize": true,
			"dropCap": true,
			"fontStyle": true,
			"fontWeight": true,
			"letterSpacing": true,
			"lineHeight": false,
			"textColumns": false,
			"textDecoration": true,
			"textTransform": true,
			"writingMode": false
		}
	}
}

在此截图中，请注意段落块的 Typography 面板，其中启用了所有设置：

WordPress post editor with a Heading and multiple Paragraph blocks inserted. In the right sidebar, nearly every typography option is shown.

根据您的主题受众，您只想启用其用户需要的功能。例如，您可能有一个只需要配置字体大小的客户。如果显示所有设置会妨碍他们的工作流程，那么这样做就没有意义。

关于首字下沉的说明：当前的实现功能在不同字体家族、字体大小和行高方面臭名昭著地存在错误。如果您保留此功能启用，请务必测试首字下沉在您主题设计中的外观。您可能需要添加自定义 CSS 以使其与您的主题匹配。

自定义字体家族

WordPress 允许您通过 theme.json 中的 settings.typography.fontFamilies 属性注册任意数量的字体家族。您可以为系统字体（驻留在访客计算机上的字体）或网络字体（与您的主题捆绑的自定义字体）添加支持。您将在本节中学习如何注册这两种字体。

这些出现在支持选择字体的块的检查器面板中 Typography > Font 字段下的选项中：

WordPress post editor with a Cover block with inner blocks nested. In the sidebar, the Font dropdown is shown.

settings.typography.fontFamilies 属性默认为空数组。您可以通过传递具有这些属性的字体家族对象来注册字体：

name: (Required) 字体家族的易读标题，可以翻译。
slug: (Required) 字体家族的 slug，将附加到生成的 CSS 自定义属性：--wp--preset--font-family--{slug}。
fontFamily: (Required) 一个有效的值，将映射到 CSS font-family 值。通常，这将是一个字体堆栈（浏览器将按顺序尝试使用的家族列表）。
fontFace: (Optional) 映射到 @font-face CSS 规则的对象数组。仅在将自定义网络字体与您的主题捆绑时才需要使用此属性。

以下是这些字体家族设置在默认 WordPress theme.json 中的样子：

{
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": []
		}
	}
}

在以下子部分中，您将首先学习如何注册系统字体。然后，您将采取下一步并注册自定义网络字体。

注册系统字体

系统字体比网络字体更简单。您只需要知道要使用哪些字体即可。对于此练习，让我们假设您要注册两个将在您的主题中使用的字体：

Primary: 一种过渡衬线字体堆栈，在现代设备上看起来很好。
Secondary: 用户的系统 UI 字体。

将此代码添加到您的 theme.json 以注册每个字体：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"name": "Primary",
					"slug": "primary",
					"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"fontFamily": "system-ui, sans-serif"
				}
			]
		}
	}
}

现在这些选项将出现在支持该功能的任何块的 Typography > Font 下拉菜单中。

WordPress 还将在编辑器和前端生成两个 CSS 自定义属性，格式为 --wp--preset--font-family--{$slug}：

body {
	--wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--wp--preset--font-family--secondary: system-ui, sans-serif;
}

当您开始将它们用作 theme.json 中的样式时，您可以引用这些属性。您也可以直接在 CSS 中使用 var( --wp--preset--font-family--{$slug} ) 引用它们。

通常建议使用语义命名方案为您的字体家族 slug 命名，以便在切换子主题、样式变体甚至从主题到主题时更具未来适应性。这些示例使用 primary 和 secondary，因为这些是广泛使用的术语。最好避免将您的 slug 命名为与当前字体家族匹配。

注册网络字体（字体面）

注册自定义网络字体与系统字体非常相似。主要的区别是您需要向字体家族对象添加 fontFace 属性。

fontFace 必须是字体面对象的数组。每个对象接受这些映射到 @font-face CSS 规则描述符的属性：

fontFamily: 有效的 CSS font-family 描述符。
fontWeight: 一系列 CSS font-weight 值。
fontStyle: 有效的 CSS font-style 值。
fontStretch: 有效的 CSS 字体拉伸值。
src: 字体文件所在位置的字体文件 URL 数组（这可用于支持多种格式，但只需要一种）。

src 属性是独特的，因为它允许您引用相对于您的主题中的 theme.json 文件的 URL。使用 "file:./path/to/file.ext" 格式来引用与您的主题捆绑的字体。

让我们尝试一个示例。基于上一节的代码，假设您想用 Open Sans 网络字体替换系统 UI 字体。

此示例还将假设您已经下载并转换了 Open Sans 字体为现代 .woff2 格式，该格式被大多数浏览器广泛支持。您还将这些文件放置在了您的主题的 /assets/fonts 文件夹中，如下所示：

/assets
- /fonts
  - /open-sans.woff2
  - /open-sans-italic.woff2

将网络字体捆绑在您的主题中并准备就绪后，将此代码添加到您的 theme.json 文件以注册它们：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"name": "Primary",
					"slug": "primary",
					"fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
				},
				{
					"name": "Secondary",
					"slug": "secondary",
					"fontFamily": "'Open Sans', sans-serif",
					"fontFace": [
						{
							"fontFamily": "Open Sans",
							"fontWeight": "300 800",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/open-sans.woff2" ]
						},
						{
							"fontFamily": "Open Sans",
							"fontWeight": "300 800",
							"fontStyle": "italic",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/open-sans-italic.woff2" ]
						}
					]
				}
			]
		}
	}
}

与系统字体一样，WordPress 将为网络字体生成 CSS 自定义属性。以下是 CSS 输出的样子：

body {
	--wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--wp--preset--font-family--secondary: 'Open Sans', sans-serif;
}

自定义字体大小

WordPress 允许您注册任意数量的预设字体大小，供您的主题用户选择。通过注册自定义大小，您可以更轻松地维护整个主题的排版一致性。
自定义字体大小出现在支持该功能的块的检查器控件中 Typography > Size 面板的选项中：

WordPress post editor showing multiple paragraphs with different font sizes.

请注意，如果您有超过五个自定义大小，UI 将显示下拉选择而不是上面截图中显示的按钮组。

有两个与字体大小相关的 theme.json.settings.typography 子属性：

fluid: 是否启用在大型屏幕上向上缩放并在较小屏幕上向下缩放的流体字体大小。这可以针对单个自定义大小进行覆盖。默认为 false。
fontSizes: 一个字体大小对象数组，您可以使用它来自定义用户可以选择的可用预设。WordPress 注册了默认大小 small、medium、large 和 x-large。

以下是这些属性在默认 WordPress theme.json 中的样子：

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": false,
			"fontSizes": [
				{
					"name": "Small",
					"slug": "small",
					"size": "13px"
				},
				{
					"name": "Medium",
					"slug": "medium",
					"size": "20px"
				},
				{
					"name": "Large",
					"slug": "large",
					"size": "36px"
				},
				{
					"name": "Extra Large",
					"slug": "x-large",
					"size": "42px"
				}
			]
		}
	}
}

如您所见，WordPress 默认禁用流体字体大小并注册四个自己的静态大小。在几乎所有情况下，您都想用与您的主题设计匹配的大小覆盖这些大小。

与其他可以在 theme.json 中设置的预设一样，WordPress 使用 --wp--preset--font-size--{$slug} 格式自动为字体大小生成 CSS 自定义属性。对于默认大小，此 CSS 在编辑器和前端输出：

body {
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
}

WordPress 还使用 .has-{$slug}-font-size 命名方案为每个字体大小预设生成自定义 CSS 类。默认大小产生这些类：

.has-small-font-size{
	font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size{
	font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size{
	font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size{
	font-size: var(--wp--preset--font-size--x-large) !important;
}

启用流体排版

在现代网页设计中，您几乎总是使用流体排版。这允许您的字体大小随视口或容器向上或向下缩放。

WordPress 使用基于视口的系统用于流体排版。但如果您更喜欢使用不同的东西（例如基于容器的系统），您可以将其禁用而不必依赖于此。

假设您想使用默认核心大小，但希望它们都是流体的而不是静态值。您可以通过在 theme.json 文件中将 settings.typography.fluid 设置为 true 来启用此功能：

{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true
		}
	}
}

WordPress 现在将为注册的字体大小生成流体大小：

body {
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.852), 20px);
	--wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.983), 36px);
	--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.413), 42px);
}

14px 是默认最小字体大小限制。因为 small 大小低于该限制，所以它保持在静态大小 13px。

注册自定义字体大小预设

毫无疑问，您想注册与您的主题设计匹配的字体大小，而不是坚持使用默认设置。为此，您必须向 theme.json 中的 settings.typography.fontSizes 属性传递一个字体大小对象数组。

这些对象中的每一个都接受几个属性：

name: 该大小的易读标题，可以翻译。
size: 有效的 CSS 大小。这可以是数字和单位、使用 clamp() 的自定义流体大小或对其他自定义 CSS 属性的引用。
slug: 该大小的 slug，将附加到生成的 CSS 自定义属性：--wp--preset--spacing--{slug}。
fluid: 启用或禁用此特定大小的流体排版的布尔值，覆盖全局属性。或者，它可以是一个包含以下内容的对象：
- min: 字体大小可以向下缩小的最小值。必须是有效的 CSS 大小。
- max: 字体大小可以向上缩大的最大值。必须是有效的 CSS 大小。

让我们首先注册一组具有静态值的简单自定义大小。将此代码添加到您的 theme.json 文件：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "sm"
				},
				{
					"name": "Medium",
					"size": "1.25rem",
					"slug": "md"
				},
				{
					"name": "Large",
					"size": "1.5rem",
					"slug": "lg"
				}
			]
		}
	}
}

就像默认大小预设一样，WordPress 将在编辑器和前端为每个自动生成 CSS：

body {
	--wp--preset--font-size--sm: 1rem;
	--wp--preset--font-size--md: 1.25rem;
	--wp--preset--font-size--lg: 1.5rem;
}

现在，让我们再进一步。在上一示例中，您注册了 Small、Medium 和 Large 大小。假设您希望 Small 大小无论浏览器的视口宽度如何都保持其值。但您希望 Medium 和 Large 大小随视口缩放。

使用 fluid 属性，让我们按大小配置这些内容。将此代码添加到您的 theme.json：

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"name": "Small",
					"size": "1rem",
					"slug": "sm",
					"fluid": false
				},
				{
					"name": "Medium",
					"size": "1.25rem",
					"slug": "md",
					"fluid": {
						"min": "1rem",
						"max": "1.5rem"
					}
				},
				{
					"name": "Large",
					"size": "1.5rem",
					"slug": "lg",
					"fluid": {
						"min": "1.25rem",
						"max": "2rem"
					}
				}
			]
		}
	}
}

WordPress 将生成这些 CSS 自定义属性：

body {
	--wp--preset--font-size--sm: 1rem;
	--wp--preset--font-size--md: clamp(1rem, 1rem + ((1vw - 0.2rem) * 1.136), 1.5rem);
	--wp--preset--font-size--lg: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.705), 2rem);
}

您可以自定义此功能以适配您的主题，限制很少。上述内容介绍了注册自定义字体大小，但您对您的主题如何工作拥有完全控制权。

为了更深入地了解流体字体大小，请阅读开发者博客上的 Intrinsic design, theming, and rethinking how to design with WordPress。