主页/WEB笔记/网页字体适配总翻车，WordPress 6.1流体排版功能到底怎么玩？

网页字体适配总翻车，WordPress 6.1流体排版功能到底怎么玩？

2,912字
12–18 分钟
in

字体大小在不同屏幕上看简直是开盲盒，手机上挤成一坨，大屏上又小得抠脚。以前搞流体排版得自己手写clamp()函数，还得各种测试断点，折腾半天还可能翻车。WordPress 6.1直接把流体排版功能塞进了编辑器内核，不用再跟CSS死磕，在theme.json里配几个参数就能让文字大小像水一样丝滑缩放。这波操作真有点东西，下面直接上硬货。

目录

流体排版啥意思

流体排版这词听着玄乎，说白了就是让文字尺寸跟着浏览器窗口宽度平滑变化，而不是像老式响应式那样在几个固定断点跳变。实现它的核心是CSS的clamp()函数，打个比方：clamp(最小尺寸, 理想尺寸, 最大尺寸)，浏览器会根据视口宽度动态计算中间那个理想值。比如clamp(16px, 5vw, 24px)，屏幕越宽字越大，但不会小于16px也不会大于24px。WordPress 6.1把这个过程封装成了图形化配置，站点管理者在后台点点选选就能搞定，不用手写一行CSS。

前置准备条件

动手之前得确认环境达标。WordPress版本必须升到6.1或更高，或者安装Gutenberg插件13.8以上版本。当前使用的块主题（block theme）必须包含theme.json文件，像Twenty Twenty-Three这类默认主题都自带。如果是个老古董经典主题，得先转成块主题或者手动创建theme.json。另外准备一份主题备份，改配置文件翻车了还能秒回滚。

方案一：新建一个会流动的字体尺寸

这套流程让站点在编辑器中直接拥有一个“普通”字体，它会从1rem平滑涨到1.5rem。

打开theme.json

进入网站根目录的/wp-content/themes/当前主题/文件夹，找到theme.json。如果主题没有这个文件，新建一个空文本文件命名为theme.json，注意扩展名必须是.json。用代码编辑器（VS Code、Notepad++都行）打开它，别用记事本容易乱码。

写入基础结构

把下面这段代码整个复制进去，这是theme.json的标准骨架：

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "layout": {
      "contentSize": "768px",
      "wideSize": "1600px"
    },
    "typography": {
      "fluid": true
    }
  }
}

"fluid": true就是开启流体排版的总开关。contentSize和wideSize定义了内容区最大宽度，后面计算缩放范围时会参考这两个数值。

添加字体尺寸配置

在typography对象里塞进fontSizes数组，像这样：

"typography": {
  "fluid": true,
  "fontSizes": [
    {
      "name": "普通",
      "size": "1.125rem",
      "fluid": {
        "min": "1rem",
        "max": "1.5rem"
      },
      "slug": "normal"
    }
  ]
}

size字段填基准值，fluid里的min和max定义了缩放边界。上面这个配置意思是：在窄屏幕（768px及以下）字是1rem，屏幕越宽字越大，到1600px宽时涨到1.5rem，中间所有宽度都会平滑过渡。保存文件。

后台应用字体

进WordPress后台，打开任意页面或文章，用块编辑器（古腾堡）添加一个段落块。在右侧设置面板找到“排版”区域，点击字体大小下拉框，会看到一个叫“普通”的选项，选中它。这时候段落文字就会自动获得流体缩放效果。前端查看页面，缩放浏览器窗口宽度，能看到文字大小连续变化，没有跳变感。

写theme.json时JSON格式要求极其严格，最后一个键值对后面不能有逗号，花括号方括号必须成对。万一保存后网站报错，马上删掉刚改的内容或者用备份覆盖。另外size和fluid.min、fluid.max的单位必须一致，都填rem或都填px，混着用会崩。

方案二：让某个字体尺寸原地站岗

有时候不想让所有字体都流动，比如超大标题希望固定大小不跟着屏幕乱窜。这个方案演示怎么把“超大”字体排除在流体效果之外。

保留总开关

跟方案一一样，先在theme.json的settings.typography里写上"fluid": true，这是全局开启。

配置多个字体其中禁用一个

在fontSizes数组里塞进四个尺寸，最后一个“超大”把fluid设为false：

"fontSizes": [
  {
    "size": "0.875rem",
    "fluid": {
      "min": "0.875rem",
      "max": "1rem"
    },
    "slug": "small",
    "name": "小号"
  },
  {
    "size": "1rem",
    "fluid": {
      "min": "1rem",
      "max": "1.5rem"
    },
    "slug": "normal",
    "name": "普通"
  },
  {
    "size": "1.5rem",
    "fluid": {
      "min": "1.5rem",
      "max": "2rem"
    },
    "slug": "large",
    "name": "大号"
  },
  {
    "size": "2.25rem",
    "fluid": false,
    "slug": "x-large",
    "name": "超大"
  }
]

注意“超大”那一项没有写fluid.min和fluid.max，而是直接写"fluid": false。保存文件。

验证效果

进编辑器创建一个标题块，在字体大小选项里选“超大”，预览页面。无论怎么拖拽浏览器窗口边缘，“超大”字号的文字始终是2.25rem纹丝不动。再选“大号”或者“普通”，缩放窗口就能看到字体会跟着变。前后对比非常直观。这种混搭方式特别适合那些需要视觉冲击力又不想被屏幕宽度绑架的标题场景。

有些主题开发者会踩一个坑：全局fluid设为true之后，如果某个字体尺寸忘了写fluid属性，WordPress会默认给它套上流体效果。所以想让它固定，必须显式写"fluid": false。另外size的值即使写了也不会自动作为最小边界，想要固定大小就直接禁用流体，别在size里填个固定值还开着fluid，那样反而会多出一层莫名其妙的计算。

生成的CSS长啥样

WordPress背后把theme.json里的配置转换成了实际CSS，拿方案一“普通”字体举例，系统会吐出类似这样的代码：

.has-normal-font-size {
  font-size: clamp(1rem, 1rem + ((1vw - 0.48rem) * 0.962), 1.5rem);
}

clamp()里的那一长串是WordPress自己算的缩放曲线，不用管细节。前端元素上会自动挂上.has-normal-font-size这个class。如果好奇想扒出来看看，用浏览器开发者工具检查那个段落，在样式面板里就能逮到这条规则。

有的老主题之前已经手动写了clamp()，升级到6.1后可以对比一下两种方式的效果差异。官方生成的曲线更平滑，而且跟编辑器面板深度绑定，改了theme.json里layout.contentSize的数值，缩放比例会重新计算，手写版本就没这个待遇。所以建议逐步迁移到新机制，老代码可以先注释掉观察一阵再删。

最新发布