如何使用流式排版实现WordPress自由缩放字体

让文本在所有屏幕上都呈现良好的效果并非易事。长期以来，网页设计师一直使用媒体查询断点来调整字体大小，但随着设备和屏幕尺寸的不断增加，这种方法很快就会变得混乱不堪。

从 WordPress 6.1（2022 年 11 月发布）开始，我们拥有了一种更好的方法：流式排版。它会自动调整 theme.json 文件中定义的字体大小，使其平滑缩放，不受屏幕宽度或高度的影响。

这项功能不仅可以改变字体大小，还可以微调行高、字间距，甚至留白，从而使您的设计在所有设备上都更加一致、易读且易于访问。

流式排版并非什么新事物，早 23 年我们就与大家一起分享过关于“为响应式设计应用流体排版（Fluid Typography）”，大家也可以回顾下内容。

本文将解释流式排版的工作原理、它与传统断点的区别，以及如何使用 theme.json 和 CSS 在 WordPress 中实现它。

但首先，让我们回顾一下过去是如何处理排版的，以及为什么流式排版是一项如此重大的改进。

断点排版 vs. 流式排版

理解流式排版（fluid typography）的一个好方法是将其与断点排版（breakpoint typography）进行比较。断点排版使用媒体查询来针对特定设备的屏幕宽度调整字体大小。

断点排版

通常，断点是指视口宽度的特定范围，通常以像素为单位。一种常见的做法是设置三个主要断点，分别针对移动设备、笔记本电脑和台式机屏幕。

以下是 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 版本）提供备用方案。

以下是具体操作方法：

/* Fallback (for IE11 and other old browsers) */
li {
font-size: 1.25rem; 
}
/* Preferred (modern browsers) */
li {
font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

温馨提示：始终将备用方案放在现代声明之前。现代浏览器会忽略旧版本，并自动应用 clamp() 值，从而确保流畅运行，无需额外条件。

流式排版的工作原理

流式排版的核心在于三个设置：最小尺寸、最大尺寸和首选尺寸。首选尺寸是一个介于最小值和最大值之间的滑动条，由视口宽度决定。

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 就会自动处理计算。

常用术语

在继续之前，让我们回顾一下流式排版中使用的一些关键单位。每个单位都是相对于其他单位进行缩放的。

关于theme.json的几点说明

theme.json 是数据驱动的，因此它会自动生成 CSS，无需手动编写。

正如您所预期的，WordPress 核心包含一个 theme.json 文件，用于设置区块主题自身 theme.json 文件所使用的基础属性。WordPress 实现流式排版的方式也是如此。

与几乎所有样式属性一样，这些属性可以全局更改，也可以使用子主题针对每个区块进行更改，我们建议所有自定义操作都使用子主题。

如果您不熟悉 theme.json，我们强烈建议您阅读我们的文章“在 theme.json 中使用属性和键值对”。

如何在TT5（Twenty Twenty Five）主题中使用流式排版

当区块主题的 theme.json 文件包含设置 "fluid": true 时，WordPress 会自动使用 CSS 的 clamp() 函数生成流式排版规则。这是通过一个内置算法实现的，该算法会计算每个字体大小的平滑缩放。

{
"settings": {
"typography": {
"fluid": true
}
}
}

如果省略 "fluid"，WordPress 默认设置为 false，这意味着文本大小将保持固定，不会自适应缩放。

启用自适应排版后，TT5 定义了五种预设字体大小。每种字体大小都包含最小值和最大值，WordPress 会使用这些值通过 clamp() 函数生成最终的 CSS 样式。

温馨提示：TT5 明确为小字号设置为 "fluid": false，因此它不会缩放。

实际说明

现在我们了解了 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 的模式：小尺寸保持不变，而其他尺寸则平滑缩放。

在后台，WordPress 仍然会计算每个最小值和最大值之间的首选（自适应）值。

选项 2 — 使用style.css文件

或者，您可以使用样式表中的一行代码来全局缩放所有元素：

:root {
font-size: 125%;
}

这将根字体大小增加 25%，从而有效地缩放所有使用 rem 单位的元素。

单个区块的自定义流式字体

您还可以选择性地应用流式字体大小。

例如，要使所有列表项（ core/list ）使用中等大小而不是默认的大号，请将以下内容添加到您的 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、xsmall、small）是固定的，而较大的尺寸则使用 clamp() 函数进行平滑缩放。

这确保了不仅文本，而且布局间距也能优雅地适应不同的屏幕尺寸。

小结

断点和流式排版各有用途。当它们结合使用时，可以创建向前兼容的布局，使其在各种屏幕上平滑缩放，从而为所有人提供一致且易读的体验。

如果您不想手动计算，可以使用以下几款免费工具来微调和可视化您的数值：

• Modern Fluid Typography Editor
• Fluid Typography Calculator

这些工具可以轻松生成符合您设计比例的 clamp() 值，尤其适用于经典主题的开发。