字体换了七八款，版面还是松散，问题不在字体本身，在你没有把字重层级、字号比例、行高字距、间距节奏配成一套能继承、能跨端缩放的配置。WordPress从5.8起用theme.json统一管这些值，settings决定编辑器里出现哪些控件，styles决定前台实际样式，配错一层就白调。这篇就把漂亮的字体设计拆成选、配、调、验四步，讲清楚已有字体怎么搭、怎么在WordPress里落成一套不崩的配置。
对出海做站的人来说，字体配置不只是好看不好看，它决定老外读你正文累不累。
- 这是什么：theme.json管全局字体与间距，字体、字号、行高、字距、间距都在这里定义
- 官方怎么分层：settings管控件和预设，styles管前台实际样式
- 怎么做：建文件，写typography，写spacing，最后在styles落值
- 最容易踩的坑：blockGap设null会连生成的间距CSS一起关掉
这篇只讲已有字体怎么搭得漂亮、怎么在WordPress里落成一套不崩的配置，不重复造字形，也不重复查授权。站内同栏目的其他工具文章可以一起看。
本文目录
漂亮的字体设计到底指什么：不是换字体，是把五件事配成一套
漂亮的字体设计这个说法，容易被理解成挑一款好看的字体。字体只是起点。一套版面顺不顺眼，不只是挑一款好看的字体；字体、字号、行高、字距、间距这些值要在 theme.json 里配成一套。
一套搭配由哪五件事组成
字形是字体本身，选哪一款。字重层级是同一款字体用几档粗细，标题一档、正文一档、辅助文字一档。字号比例是各级文字之间的大小关系。字距行高控制每一行字内部和行与行之间的松紧。间距节奏是段落之间、区块之间留多少空。
五件事里，字形是唯一需要挑的，其余四件都是配。挑字形这一步的原则，可以看创意字体设计基本原则。字形定下来以后，剩下的工作是把它翻译成一组数字。
标题用哪一档字重，正文用多大字号，行高定多少，段落之间隔多少，这些数字定完，版面就定型了。
为什么说它是配置而不是审美
审美是主观的，配置是可复制的。theme.json能管这件事，是因为它是WordPress、主题、插件和用户之间沟通的共同语言。你在里面写的值，前台和编辑器里看到的是同一套。
这件事的意义在于：一套配好的字体参数能继承。顶层设置对所有区块生效，除非某个区块单独覆盖。你不用给每个段落、每个标题、每个按钮单独调一遍。改一个地方，全站跟着变。
官方有句话把这件事说透了：「The settings and styles that you configure in theme.json are ultimately reflected on both the front end of the site and WordPress’ built-in editors.」你改的是配置，看到的是页面，中间不用来回切。
settings和styles两层各管什么
theme.json里管字体的主要是两层：settings和styles。settings决定编辑器里出现哪些控件、有哪些预设值可选；styles决定前台实际长什么样。settings里没开的控件，编辑器里就不会出现；前台实际样式由styles决定。
举个例子。settings.typography.lineHeight设成false，编辑器里就没有行高控件，用户调不了。设成true，控件出现，用户可以在你给的范围内改。改完以后前台是什么效果，由styles决定。
这一层分不清，最容易出现的状况是：配置写了一大堆，编辑器里什么都没变，前台也看不出差别。先查settings，再查styles，顺序反了会浪费很多时间。
为什么你换了好几款字体还是不好看：三个结构性原因
换字体解决不了版面松散，原因是字体只管字形这一件事，剩下四件没动。下面三个原因，是换了几款字体还是不好看时要先看的地方。
原因一：只换了字形，没建字重层级，标题正文一个粗细
标题和正文用同一档粗细，读者扫过去分不出主次。字重层级的意思是：同一款字体，标题用一档粗的，正文用一档常规的，辅助文字再细一点。三档拉开，版面才有骨架。
只换字体不建层级，等于给一间毛坯房换了墙纸，家具还是一样乱。
原因二：字号用px写死，用户调大浏览器字号时不跟着缩放
px是绝对单位，不随屏幕尺寸或用户浏览器设置变化。用户在浏览器里把默认字号调大一级，你用px写的标题和正文一动不动，比例就乱了。em、rem、%、vh、vw是相对单位，会跟着缩放。
官方无障碍提示里明确建议用rem或em这类相对单位，而不是固定像素，这样用户调大浏览器字号时文字和间距会自动缩放。
原因三：间距没进设计节奏，blockGap留在默认null
blockGap的默认值是null。设成null不只是把界面上的间距控件藏起来，WordPress生成的区块间距CSS也会一起被禁用，你得自己写自定义CSS补上。
官方原话是：「Leaving this to the default null value is not usually recommended except in special cases. Generally, you would want consistent spacing as part of your design’s vertical rhythm.」间距是设计垂直节奏的一部分，不是可调可不调的东西。
这三个原因合起来看，问题不在字体选得对不对，在于配置没有成体系。字体只是入口，层级、单位、间距才是让版面站住的东西。
已有字体怎么搭得漂亮：选、配、调、验四步
这四步针对的是你手上已经有的字体，不涉及造新字形。每一步都给出动作、理由和出问题时怎么回查，按顺序做。
第一步 选：先定标题字体和正文字体的分工
选字体不是打开字体网站一页页翻，是先看你手上这个主题允许你选什么。WordPress区块编辑器里，选中一个区块，右侧边栏的Typography分区下有一个字体族下拉，里面每一项都带预览，可用列表由你的主题决定。
动作：在Typography下点开字体族下拉，用预览定两款，一款标题，一款正文。标题字体可以个性强一点，正文字体要耐读。
理由：字体族列表由主题注册，不是整个系统里所有字体都能随便调出来。先确认范围，再谈搭配，顺序反了会白挑。英文站的字选和装是另一条路，可以看英文字体怎么选怎么装。
出问题怎么回查：下拉里没有你想要的字体，回主题的settings.typography.fontFamilies看有没有注册。没注册就加进去，注册了但没出现，检查字段拼写和JSON格式。
第二步 配：把字重层级和字号档位定下来
字重和字号是两个维度，一起用才能拉开层级。只靠字号，标题要放得很大才有效果，版面容易挤。
动作：在Appearance里从Thin到Extra Bold和Black之间选2到3档，标题一档、正文一档、需要强调的地方一档。字号可以用预设的S、M、L、XL，也可以点默认选项上方的滑块图标设自定义值。
理由：同一款字体，字重差一档，视觉重量差很多。
出问题怎么回查：某个区块没有字重控件，说明这个区块本身没实现这个功能，theme.json开不了。不是所有设置对所有区块都相关，区块自己要支持对应功能，主题才能把它打开。
第三步 调：字距、行高、间距一起动
这三件事要一起调，分开调很容易调完一个坏一个。
动作：行高多数主题默认是1.5，先在这个基准上改。字距的单位可以从默认px换成%、em、rem、vw、vh。间距在settings.spacing里配，blockGap、margin、padding三项分别管区块间距、外边距、内边距。margin和padding默认都是false，要在theme.json里显式设成true才会出现。
理由：间距是网页设计里最复杂的部分之一，官方把它描述成要把margin、padding、gap、行高、字号组合成一条和谐的流。这句话说的是：这几个值不孤立，改一个，另外几个的观感跟着变。
出问题怎么回查：间距控件不出现，先查settings.spacing里对应项是不是true。customSpacingSize设成false的话，自定义间距选项会被关掉，但主题定义的尺寸还能用。spacingScale和spacingSizes两种注册方式选一种，不要混用。
第四步 验：三处验收
配完不算完，要在三个地方验一遍。
动作一：在编辑器里选中一个段落，点Typography选项的三点菜单，把默认隐藏的排版设置全部展开，逐项点开看实际效果。改坏了，点三点菜单里的Reset All还原，所有改动一次清掉。
动作二：把浏览器默认字号调大一级，刷新页面，看正文和间距有没有跟着缩放。不跟着缩放的，回第三步把px换成rem或em。
动作三：看文字颜色和背景色的对比度有没有出警告。对比度不足时编辑器会给提示，说文字难读，要换一个符合无障碍指引的颜色。
理由：官方无障碍提示明确建议用相对单位，对比度不足会直接给警告。这两个检查不花钱，但能挡掉一批自己看着还行、读者读着费劲的配置。
版面这一步做完，下一步是网格和层级，可以看网格与层级排版。
要用的数字和限制：版本、单位、间距档位
这张表里的数只放做这件事真正会用到的。表里每一行都标明用在哪一步，按步查就行。
| 项目 | 数值 | 用在哪一步 |
|---|---|---|
| theme.json最新版本 | version 3，WordPress 6.6引入 | 建文件写version |
| theme.json引入版本 | WordPress 5.8 | 判断你的站能不能用这套机制 |
| 默认间距比例 | 7步，每步递增1.5rem | 配spacingScale |
| 默认间距档位值 | 0.44 / 0.67 / 1 / 1.5 / 2.25 / 3.38 / 5.06 rem | 选间距档 |
| 间距预设显示规则 | 7个或更少显示滑块，超过7个显示下拉 | 决定预设数量 |
| 默认行高 | 多数主题1.5 | 调行高 |
| 默认布局宽度 | contentSize 800px、wideSize 1000px | 验正文行长 |
| 间距允许单位（截至WP 6.3） | px、em、rem、vw、vh、vmin、vmax、ch、ex、cm、mm、in、pc、pt | 选单位 |
| 默认间距单位数组 | px、em、rem、vh、vw、% | 选单位 |
这些数字里，最影响结果的是间距比例和档位。预设数量决定编辑器里显示滑块还是下拉：7个以内是滑块，超过7个变下拉。滑块适合快速扫一眼，下拉适合预设多、要精确选。
三条文字限制要记一下。字号单位在编辑器里能在px、em、rem之间切换，但官方建议用rem或em，不用px。想限制用户只能用主题预设的间距，把customSpacingSize设成false，自定义间距选项会被关掉，主题定义的尺寸还能用。spacingScale和spacingSizes两种注册间距预设的方式选一种，不要混用，官方给的理由是简单。
字体的授权限制是另一条线。OFL 1.1发布于2007年2月26日，OFL字体可以用在书籍、海报、logo和网站上，不需要署名，也可以自由修改和再分发，但部分项目有保留字体名，改名才能用。授权流程看可商用字体查授权。
配完不生效、控件不见了：五个误区和排查顺序
配完不生效，多半是下面五个地方。每个先给结论，再给依据。
误区一：blockGap设null，以为只关界面
结论：设null不只是把界面藏起来，WordPress生成的区块间距CSS也一起没了。
依据：官方写得很清楚，null时既没有控件，也没有生成的CSS；true时控件和CSS都有；false时没有控件，但有CSS。三种状态对应三种结果，设之前先想清楚要哪一种。
| blockGap值 | 控件 | WordPress生成的CSS |
|---|---|---|
| null（默认） | 无 | 无 |
| true | 有 | 有 |
| false | 无 | 有 |
误区二：不写version，WordPress按API版本1读
结论：不写version也能跑，但WordPress会当成API版本1来读，用了新版本语法可能不生效。
依据：官方说技术上可以省掉version，但那样读的是版本1，用过期的版本可能让你的代码无效。最新版本是version 3，WordPress 6.6引入。
误区三：以为开了设置所有区块就有该功能
结论：theme.json里开一个设置，不等于所有区块都长出了这个功能。
依据：区块本身没实现某个功能，主题也开不了。官方举的例子是dropCap，区块没实现它，主题通过theme.json也启用不了。
误区四：字号写px
结论：px是绝对单位，用户调大浏览器字号时文字不跟着缩放。
依据：px不随其他元素变化，不具响应式，只有细边框、静态图标、固定组件尺寸这类极少数情况才需要。
排查顺序：从theme.json查到用户样式
配完不生效，按这个顺序查：
- 先看theme.json里有没有设置。有设置的话，会优先于通过add_theme_support声明的值。
- 再看是不是区块本身不支持这个功能。
- 再看单位有没有写错，px和rem混用。
- 最后看编辑器里有没有被用户样式覆盖。主题和用户都设了段落字号时，只入队用户那份。
排查的时候，theme.json还有一个附带好处：它能减少入队的CSS量，避免优先级战争。配置写得越结构化，出问题时越好找。
AI能帮哪几步、哪几步必须你自己动手
AI在这件事里能帮的，是把候选和片段整理出来，不是替你做决定。下面四步它可以接，三条提示词可以直接抄。
第一步，让它根据你的主题定位列字体组合候选。告诉它你做的是什么行业、什么风格的站，让它给出几套标题字体和正文字体的搭配，每套说明适用场景。
第二步，让它把选定的参数整理成theme.json片段。你报数字，它写成settings.typography和settings.spacing的结构。
第三步，让它按官方单位规则检查你的配置。标出用了px的地方，给出rem或em的替换建议。
第四步，让它按OFL条款判断某款字体能不能商用、能不能改、要不要改名。这一步它给的是参考，最后还要你对着许可证原文确认。猎者出海的AI Agent在这类活上能接一部分：把官方条款和你的配置一起发给它，让它对照原文逐条指出来，整理资料、对照官方文档这类重复动作省下来，判断留给你。
三条提示词，本文给的示例，不是官方模板：
- 「我在做一个WordPress区块主题，定位是[行业/风格]。请给我3套字体搭配方案，每套写明标题字体、正文字体、字重层级、字号比例，并说明适合什么场景。不要推荐具体字体厂商，只给字体类型和搭配逻辑。」
- 「帮我把下面这套排版参数写成theme.json的settings.typography和settings.spacing片段：标题字号[X]、正文字号[X]、行高[X]、字距[X]、间距比例[X]。字号和间距一律用rem，不要用px。输出完整JSON。」
- 「这是我的theme.json片段：[粘贴]。请按WordPress官方文档检查：有没有把blockGap设成null、有没有用px写字号、有没有在区块不支持的情况下强行开功能。逐条指出问题并给修改建议。」
有三件事必须你亲手做。
- 在主题根目录亲手建theme.json文件，写入version和$schema两行，确认编辑器不报错。
- 进WordPress后台的区块编辑器，选中一个段落区块，打开右侧Typography分区，逐个点开字号、行高、字距控件，看实际显示效果再决定留哪个值。
- 在浏览器里把默认字号调大一级，刷新页面，看正文和间距有没有跟着缩放，据此决定哪些px要换成rem。
AI给的是候选和片段，验收标准在官方文档和你的浏览器里。
常见问题
theme.json能覆盖核心默认值吗
能。这套规范对核心、主题、用户三种来源是同一套，主题建theme.json可以覆盖核心默认值。用户也能在站点编辑器里覆盖主题或核心的偏好。
旧版本的theme.json在新版WordPress上还能用吗
能用。旧版本向后兼容，会继续在新版WordPress和Gutenberg插件上工作。新功能只在最新版本上开发，想用新特性要升version。
预设是什么
预设是settings的一部分，是通过界面控件展示给用户选的值。用theme.json定义以后，引擎会自动翻译预设名或入队对应的CSS类和自定义属性。
用什么工具做版式
版式不是字体配完就结束了，网格和层级要单独处理。站内整理过一批做版式的站点，可以看版式设计网站推荐。
字体授权要注意什么
OFL 1.1发布于2007年2月26日，OFL字体可以用在书籍、海报、logo和网站上，不需要署名，也可以自由修改和再分发。部分项目有保留字体名，改名才能用。字体可以打包进应用或软件，但要满足一些条件。
字体配置这件事，做完一次能管很久。theme.json摆在那里，改一个值，前台和编辑器一起变。猎者出海的AI Agent在整理这类配置和对照官方文档上能省一些时间，但字号、行高、字距最后调到什么值，还是要你在编辑器里一个一个看。
发表评论