WordPress 主题排版完全指南
一份为 WordPress 主题开发者准备的排版配置手册，从字体、字号到流体排版，覆盖 theme.json 中的所有排版设置。
开始之前：排版是什么？
排版（Typography）在网页设计中，指文字的外观和布局。在 WordPress 主题开发中，排版设置通过 theme.json 文件中的 settings.typography 字段来控制。
如果你是初学者，可以先这样理解：theme.json 是 WordPress 主题的“配置文件”，它告诉 WordPress 你的主题支持哪些功能、使用哪些字体、字体大小是多少。而 typography 部分，专门用来配置所有与文字相关的内容。
本文会带你逐一了解：
- 如何在后台控制面板中开启或关闭排版功能
- 如何注册自定义字体（包括系统字体和网页字体）
- 如何配置预设字号
- 如何开启流体排版（让字体在不同屏幕尺寸下自动缩放）
开启或关闭排版功能
在 theme.json 中，可以通过布尔值（true 或 false）来控制哪些排版选项出现在编辑器的侧边栏中。并不是所有功能都适用于所有区块，比如 dropCap（首字母下沉）只对段落区块生效。
可配置的排版选项
| 设置项 | 作用 | 默认值 |
|---|---|---|
customFontSize | 是否允许用户自定义字号 | true |
dropCap | 段落区块是否支持首字母下沉 | true |
fontStyle | 是否允许选择字体样式（如斜体） | true |
fontWeight | 是否允许选择字体粗细 | true |
letterSpacing | 是否允许自定义字间距 | false |
lineHeight | 是否允许自定义行高 | false |
textColumns | 是否显示文字分栏选项 | false |
textDecoration | 是否允许文字装饰（下划线、删除线） | true |
textTransform | 是否允许大小写转换 | true |
writingMode | 是否开启文字方向（水平/垂直） | false |
配置示例
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
}
}
}
注意：对于大多数普通用户来说，过多的选项反而会造成困扰。你可以根据目标用户的实际需求，只开启必要的功能。比如为企业客户制作主题时，可能只需要保留字号调整功能。
关于首字母下沉
dropCap 功能在不同字体、字号和行高下表现并不稳定。如果要在主题中启用此功能，务必进行充分测试，必要时添加自定义 CSS 来确保显示效果。
注册自定义字体
WordPress 通过 settings.typography.fontFamilies 允许你注册任意数量的字体。字体分为两种：
- 系统字体：访客设备上已安装的字体
- 网页字体：随主题一起打包的自定义字体文件
字体在编辑器侧边栏的“字体”下拉菜单中显示。
字体对象的属性
每个字体对象需要包含以下字段：
| 属性 | 必填 | 说明 |
|---|---|---|
name | 是 | 字体在后台显示的名称，支持翻译 |
slug | 是 | 字体的标识符，用于生成 CSS 变量 |
fontFamily | 是 | CSS 的 font-family 值，通常是一个字体栈 |
fontFace | 否 | 使用网页字体时，配置 @font-face 规则 |
注册系统字体
系统字体只需提供字体栈即可。下面的示例注册了两种字体：
json
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "主字体",
"slug": "primary",
"fontFamily": "Georgia, 'Times New Roman', serif"
},
{
"name": "辅字体",
"slug": "secondary",
"fontFamily": "system-ui, -apple-system, sans-serif"
}
]
}
}
}
注册后，WordPress 会自动生成 CSS 变量：
css
body {
--wp--preset--font-family--primary: Georgia, 'Times New Roman', serif;
--wp--preset--font-family--secondary: system-ui, -apple-system, sans-serif;
}
你可以在主题的 CSS 中通过 var(--wp--preset--font-family--primary) 来引用这些字体。
注意：建议使用语义化的名称（如
primary、secondary）作为字体标识，而不是具体的字体名（如roboto）。这样在更换字体时，不需要修改所有引用。
注册网页字体（@font-face）
网页字体的注册方式与系统字体类似，区别在于需要添加 fontFace 字段。它接受一个数组，每个元素对应一个 @font-face 规则。
fontFace 支持的属性
| 属性 | 说明 |
|---|---|
fontFamily | 字体家族名称 |
fontWeight | 字体粗细范围 |
fontStyle | 字体样式（normal/italic） |
fontStretch | 字体拉伸 |
src | 字体文件路径数组 |
实际操作示例
假设你已将字体文件放在主题的 /assets/fonts/ 目录下：
text
/assets/
/fonts/
open-sans.woff2
open-sans-italic.woff2
完整的注册代码：
json
{
"settings": {
"typography": {
"fontFamilies": [
{
"name": "主字体",
"slug": "primary",
"fontFamily": "Georgia, 'Times New Roman', serif"
},
{
"name": "Open Sans",
"slug": "open-sans",
"fontFamily": "'Open Sans', sans-serif",
"fontFace": [
{
"fontFamily": "Open Sans",
"fontWeight": "300 800",
"fontStyle": "normal",
"src": [ "file:./assets/fonts/open-sans.woff2" ]
},
{
"fontFamily": "Open Sans",
"fontWeight": "300 800",
"fontStyle": "italic",
"src": [ "file:./assets/fonts/open-sans-italic.woff2" ]
}
]
}
]
}
}
}
src 属性中的 file:./ 表示路径相对于 theme.json 文件所在的位置。
自定义字号预设
WordPress 默认提供了四个字号预设：Small、Medium、Large、Extra Large。大多数情况下，你需要根据主题的设计来重新定义这些值。
字号对象的属性
| 属性 | 必填 | 说明 |
|---|---|---|
name | 是 | 后台显示的名称，支持翻译 |
slug | 是 | 标识符，用于生成 CSS 变量 |
size | 是 | CSS 长度值 |
fluid | 否 | 是否启用流体排版，或指定小/大值 |
静态字号示例
json
{
"settings": {
"typography": {
"fontSizes": [
{
"name": "小号",
"slug": "sm",
"size": "0.9rem"
},
{
"name": "中号",
"slug": "md",
"size": "1.2rem"
},
{
"name": "大号",
"slug": "lg",
"size": "1.6rem"
}
]
}
}
}
注册后生成的 CSS 变量：
css
body {
--wp--preset--font-size--sm: 0.9rem;
--wp--preset--font-size--md: 1.2rem;
--wp--preset--font-size--lg: 1.6rem;
}
同时 WordPress 还会生成对应的工具类：
css
.has-sm-font-size { font-size: var(--wp--preset--font-size--sm) !important; }
.has-md-font-size { font-size: var(--wp--preset--font-size--md) !important; }
.has-lg-font-size { font-size: var(--wp--preset--font-size--lg) !important; }
流体排版（Fluid Typography）
流体排版是指字号随着视口宽度变化而自动缩放的技术。WordPress 在 6.1 版本开始原生支持此功能。
全局开启
json
{
"settings": {
"typography": {
"fluid": true
}
}
}
开启后，WordPress 会将所有预设字号转换为 clamp() 函数。比如：
css
/* 原先的静态值 */ --wp--preset--font-size--md: 1.4rem; /* 开启流体后自动转换 */ --wp--preset--font-size--md: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
clamp() 接受三个参数：小值、理想值、大值。浏览器会根据视口宽度在小和大值之间调整字号。
精细控制单个字号
你可以针对某个字号单独配置流体行为：
json
{
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"name": "小号",
"slug": "sm",
"size": "0.9rem",
"fluid": false
},
{
"name": "中号",
"slug": "md",
"size": "1.4rem",
"fluid": {
"min": "1rem",
"max": "1.8rem"
}
},
{
"name": "大号",
"slug": "lg",
"size": "1.8rem",
"fluid": {
"min": "1.2rem",
"max": "2.4rem"
}
}
]
}
}
}
在这个例子中：
- 小号字体保持固定大小，不随视口变化
- 中号和大号字体各自有独立的缩放区间
生成的 CSS：
css
body {
--wp--preset--font-size--sm: 0.9rem;
--wp--preset--font-size--md: clamp(1rem, 1rem + 0.8vw, 1.8rem);
--wp--preset--font-size--lg: clamp(1.2rem, 1.2rem + 1.2vw, 2.4rem);
}
注意：如果字号小于 14px，即使全局开启了流体排版，WordPress 也不会将其转换为流体值，以保持可读性。
总结
WordPress 的 theme.json 排版系统提供了完整的字体控制能力。你可以通过配置来控制后台编辑器的功能选项、注册任意数量的字体、定义精确的字号预设，以及开启现代化的流体排版。
几个关键点：
- 排版功能按需开启，避免给用户造成困扰
- 字体标识使用语义化命名，便于后期维护
- 网页字体使用
file:./相对路径引用 - 流体排版建议开启，提升移动端阅读体验
- 可以对单个字号单独控制流体行为，实现更精细的设计
在实际开发中，建议先在 theme.json 中定义好排版基础，然后在样式文件中通过 CSS 变量引用这些值。这样可以保持配置与样式的一致性，也让后续维护更加方便。