让文字在每块屏幕上看起来都很美观的难度超乎想象。长期以来，网页设计师使用媒体查询断点来调整字体大小，但随着设备和屏幕尺寸的不断增加，这种方法很快就会变得难以管理。
从 WordPress 6.1（2022年11月发布）开始，有一种更好的方法：流式排版。它可以自动调整 theme.json 文件中定义的字体大小，使其能够平滑缩放，无论屏幕宽度或高度如何。
这个功能不仅能改变字体大小，还能微调行高、字间距，甚至空白间距，让你的设计在每种设备上都更加一致、更易阅读、更具无障碍性。
本文将介绍流式排版的工作原理、它与传统断点的区别，以及如何使用 theme.json 和 CSS 在 WordPress 中实现流式排版。
但首先，让我们看看过去是如何处理排版的，以及流式排版为何是这么大的改进。
断点排版与流式排版
理解流式排版的一个好方法是将它与前身断点排版进行比较，后者使用媒体查询来针对特定设备宽度进行字体大小设置。
断点排版
通常，断点是视口宽度的特定范围，一般以像素为单位。常见的方法是设置三个主要断点，分别针对移动设备、笔记本电脑和桌面屏幕。
以下是笔记本电脑在 CSS 文件中的典型断点设置：
@media (min-width: 48em) and (max-width: 74.9375em) {
body {
font-size: 1.125rem;
line-height: 1.6;
}
h1 {
font-size: 2rem;
}
}
虽然这能工作，但它有一个主要缺点：随着新设备和屏幕尺寸的出现，管理所有这些断点很快就会变得难以为继。
在上面的示例 GIF 中，随着视口缩小，文本以不均匀的跳跃方式调整大小。这种"阶梯式"行为经常导致笨拙或不可预测的缩放效果，这对于平滑、一致的排版来说并不理想。
流式排版
随着 2019 年 CSS clamp() 属性的引入，以及视口单位（vw 和 vh）的出现，流畅的自动缩放成为可能。
这些功能让你可以定义基于视口尺寸动态缩放的字体大小，从而无需多个断点。
这是一个使用 clamp() 设置中等字体大小的示例：
.has-medium-font-size {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}
我们稍后会仔细研究 clamp() 的工作原理，但现在你可以把它想象成一个公式，设置最小、首选和最大字体大小，确保文本在各种屏幕上平滑缩放。
在这个 GIF 中，随着视口变窄，文本流畅地调整。没有跳跃或突然的大小变化。
这种流畅的行为就是流式排版相比基于断点的设计如此进步的原因。它不是以阶梯方式调整文本，而是允许在每种设备上感觉自然的无缝缩放。
但平滑调整大小只是一个开始。流式排版还提供了其他几个优势，让你更容易构建灵活、一致且无障碍的设计。
流式排版的优势
当你使用流式排版时，以下优势会变得显而易见。
默认响应式
文本会自动随视口缩放，无需断点。无论你的网站是在手机、平板电脑还是超宽显示器上查看，字体大小都会自然调整，无需额外的 CSS。
更容易维护
无需使用多个媒体查询，您的代码保持简洁易读。您可以使用简单的"T恤"尺码来定义字体大小，从小型到特大号，并在整个主题中一致应用。
一致的设计
确保您的字体大小在整个网站中保持一致，既全局一致，又在需要时在各个块中保持一致。只需定义一次比例尺，它就会无缝地流经所有块、模式和模板。
改进的可访问性和可读性
由于流式排版能够平滑缩放，文本始终以适合每个设备的可读大小显示。这使您的内容更易于访问，特别是对于有视力偏好或自定义浏览器缩放级别的用户。
面向未来的设计
由于文本大小不再与人為的断点绑定，您的字体比例尺保证适用于任何未来的屏幕尺寸和视口。
缩放速度控制
控制文本增大或缩小速度的能力由一个首选值设置，该值会随视口宽度而变化。
浏览器支持
clamp() 函数在所有现代浏览器中都得到良好支持，包括当前版本的 Chrome、Edge、Firefox 和 Safari。
但是，如果您需要 100% 的覆盖率，您仍然需要为旧版浏览器（如 Internet Explorer 11 以及 2020 年之前的 Safari 和 Chrome 版本）包含一个备用方案。
以下是实现方法：
/* 备用方案（用于 IE11 和其他旧版浏览器） */
li {
font-size: 1.25rem;
}
/* 首选方案（现代浏览器） */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}
流式排版的工作原理
流式排版的核心是三个设置：最小尺寸、最大尺寸和首选尺寸——这是由视口宽度决定的在最小值和最大值之间的滑动比例。
clamp() 函数在单个声明中使用这三个值：
font-size: clamp(min, preferred, max);
这确保文本在小屏幕上不会变得太小，在大屏幕上也不会变得太大。例如：
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
在这个示例中，字体大小从 1rem 开始，随着视口扩展而平滑增长，并在达到 1.25rem 时停止增长。
WordPress 如何处理它
WordPress 为您完成了繁重的工作。您可以直接在 theme.json 中定义字体大小，而无需手动计算这些值。
以下是一个简化的示例，展示了 WordPress 如何在 JSON 中表示字体大小：
{
"fluid": {
"min": "1rem",
"max": "1.25rem"
},
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
}
由此，WordPress 自动生成 CSS：
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
这使得流式排版的实现快速、一致且无错误。您只需在 theme.json 中定义一次您的值，WordPress 就会处理数学计算。
常见术语
| | | | | — | — | — | | 单位 | 定义 | 备注 | | em | 相对于其父元素的字体大小。 | 尺寸在嵌套时会复合。 | | rem | 相对于根（html）元素的字体大小。 | 在整个网站中一致缩放。 | | vw | 视口宽度的 1%。 | 用于基于宽度的缩放。 | | vh | 视口高度的 1%。 | 用于基于高度的缩放。 |
关于 theme.json 的一点说明
theme.json 是数据驱动的，因此它自动生成 CSS，而不是需要手动编写。
正如您所期望的，WordPress 核心包含一个 theme.json 文件，用于设置块主题自己的 theme.json 文件使用的基线属性。这就是 WordPress 实现流式排版的方式。
与几乎每个样式属性一样，这些可以通过子主题全局或按块进行更改，我们建议所有自定义都使用子主题。
如果您不熟悉 theme.json，我们强烈建议您阅读我们的文章《在 theme.json 中处理属性和键值对》。
WordPress 如何在 TT5（Twenty Twenty Five）中使用流体排版
当区块主题的 theme.json 文件包含设置 "fluid": true 时，WordPress 会自动使用 CSS clamp() 函数生成流体排版规则。这是通过一个内置算法来实现的，该算法会为每个字体大小计算平滑缩放。
{
"settings": {
"typography": {
"fluid": true
}
}
}
如果省略 "fluid"，WordPress 默认为 false，意味着文本大小保持固定，不会进行流体缩放。
启用流体排版后，TT5 定义了五个预设字体大小。每个都包含最小值和最大值，WordPress 使用这些值通过 clamp() 函数生成最终的 CSS。
| | | | | — | — | — | | 大小名称 | Theme.json 值 | 生成的 CSS clamp 值 | | small | size:0.875rem | clamp(0.875rem, 0.8125rem + 0.2vw, 1rem) | | medium | min:1rem max: 1.125rem | clamp(1rem, 0.9375rem + 0.25vw, 1.125rem) | | large | min:1.125rem max: 1.375rem | clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem) | | x-large | min:1.75rem max: 2rem | clamp(2.25rem, 1.75rem + 1.5vw, 3rem) | | xx-large | min:2.15rem max: 3rem | clamp(3rem, 2.25rem + 2vw, 4rem) |
实际示例
现在我们了解了 TT5 默认情况下如何处理流体排版，让我们来看看几个您可能想要自定义或扩展它的实际场景。
在这些示例中，我们将使用 TT5 子主题，并且和往常一样，请确保您的脚本已正确入队。
将所有字体大小增加 25%
如果您的访问者更喜欢较大的文字（例如在无障碍或老年友好型网站上），您可能希望全局增加所有字体大小。
选项 1 — 使用 theme.json
虽然没有一个单一的开关来缩放所有字体，但您可以手动将每个字体大小增加 25%。以下是示例配置：
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "1.09375rem",
"slug": "small"
},
{
"fluid": { "max": "1.40625rem", "min": "1.25rem" },
"name": "Medium",
"size": "1.25rem",
"slug": "medium"
},
{
"fluid": { "max": "1.71875rem", "min": "1.40625rem" },
"name": "Large",
"size": "1.725rem",
"slug": "large"
},
{
"fluid": { "max": "2.5rem", "min": "2.1875rem" },
"name": "Extra Large",
"size": "2.1875rem",
"slug": "x-large"
},
{
"fluid": { "max": "3.75rem", "min": "2.6875rem" },
"name": "Extra Extra Large",
"size": "2.6875rem",
"slug": "xx-large"
}
]
}
这遵循 TT5 的模式：small 大小保持固定，而其他大小则平滑缩放。
在后台，WordPress 仍然会在每个最小值和最大值之间计算首选的（流体）值。
选项 2 — 使用 style.css
或者，您可以通过样式表中的单行代码全局缩放所有内容：
:root {
font-size: 125%;
}
这会将根字体大小增加 25%，有效地缩放所有使用 rem 单位的元素。
为单个区块自定义流体字体
您也可以选择性地应用流体大小。
例如，要让所有列表项（core/list）使用 medium 大小而不是默认的 large，请将以下内容添加到您的 theme.json 中：
"styles": {
"blocks": {
"core/list": {
"typography": {
"fontSize": "var:preset|font-size|medium"
}
}
}
}
结果是一个更清晰的层级结构，列表项显示的文本比段落略小。
在 style.css 中设置流体排版
如果您正在使用经典主题，您可以直接在 style.css 中定义自己的 clamp() 值。
例如，以下是您如何将列表项增大到大字体的 125%：
li {
font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}
这将显示 CSS 文件中设置的更大的列表项字体大小。正如您所期望的，如果您使用经典主题，您需要在 styles.css 文件中使用 clamp() 属性。
流体间距
使用流体排版时，字体只是需要考虑的因素之一。
内边距、外边距和块间距（组块内部的空间）的尺寸也可以使用与流体字体相同的概念进行平滑缩放。
TT5 使用这些设置来建立空间大小。
"spacing": {
"defaultSpacingSizes": false,
"spacingSizes": [
{ "name": "Tiny", "size": "10px", "slug": "20" },
{ "name": "X-Small", "size": "20px", "slug": "30" },
{ "name": "Small", "size": "30px", "slug": "40" },
{ "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
{ "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
{ "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
{ "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
]
}
前三个尺寸（tiny、x-small、small）是固定的，而较大的尺寸则使用 clamp() 进行流体缩放。
这确保了不仅是您的文本，还有您的布局间距都能优雅地适应不同的屏幕尺寸。
总结
断点流体排版服务于不同的目的。当它们结合使用时，可以创建向前兼容的布局，在各种屏幕上平滑缩放，为每个人提供一致且可读的体验。
如果您不想手动计算，有几个免费工具可以帮助您微调和可视化您的值：
这些工具可以轻松生成与您的设计比例一致的 clamp() 值，特别适合经典主题开发。
准备好看看它的实际效果了吗？在 Kinsta 上托管您的 WordPress 网站，享受快速的 TTFB、内置 CDN 和边缘缓存，让您的流体字体在各地都能完美呈现（和加载）。免费试用您的第一个月。
