流式字号比例生成器（clamp()）| FluidClamp

:root { --step--2: clamp(0.6944rem, 0.6593rem + 0.1759vw, 0.8rem); --step--1: clamp(0.8333rem, 0.7778rem + 0.2778vw, 1rem); --step-0: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem); --step-1: clamp(1.2rem, 1.0792rem + 0.6042vw, 1.5625rem); --step-2: clamp(1.44rem, 1.269rem + 0.8552vw, 1.9531rem); --step-3: clamp(1.728rem, 1.4902rem + 1.189vw, 2.4414rem); --step-4: clamp(2.0736rem, 1.7475rem + 1.6303vw, 3.0518rem); --step-5: clamp(2.4883rem, 2.0462rem + 2.2106vw, 3.8147rem); --step-6: clamp(2.986rem, 2.3919rem + 2.9706vw, 4.7684rem); }

变量	最小时 (px)	最大时 (px)	×
--step-6	47.78	76.29	1.6
--step-5	39.81	61.04	1.53
--step-4	33.18	48.83	1.47
--step-3	27.65	39.06	1.41
--step-2	23.04	31.25	1.36
--step-1	19.2	25	1.3
--step-0	16	20	1.25
--step--1	13.33	16	1.2
--step--2	11.11	12.8	1.15

变量

最小时 (px)

最大时 (px)

--step-6

47.78

76.29

1.6

--step-5

39.81

61.04

1.53

--step-4

33.18

48.83

1.47

--step-3

27.65

39.06

1.41

--step-2

23.04

31.25

1.36

--step-1

19.2

1.3

--step-0

1.25

--step--1

13.33

1.2

--step--2

11.11

12.8

1.15

实时预览

模拟视口宽度1024px

6 · 68.7px流式字体随屏幕宽度平滑变化。

5 · 55.4px流式字体随屏幕宽度平滑变化。

4 · 44.7px流式字体随屏幕宽度平滑变化。

3 · 36px流式字体随屏幕宽度平滑变化。

2 · 29.1px流式字体随屏幕宽度平滑变化。

1 · 23.5px流式字体随屏幕宽度平滑变化。

0 · 18.9px流式字体随屏幕宽度平滑变化。

-1 · 15.3px流式字体随屏幕宽度平滑变化。

-2 · 12.3px流式字体随屏幕宽度平滑变化。

什么是模块化字号比例

模块化比例就是用同一个比例反复乘以基准字号：基准 16px、比例 1.25 时，会得到 16、20、25、31.25……而相除则得到更小的 12.8 和 10.24。由于每个字号都由同一个比例联系在一起，标题、正文和说明文字看起来就像同一家族的成员。

为什么使用两个比例

小屏幕放不下标题与正文之间强烈的对比，而大屏幕如果缺少对比又会显得平淡。因此本生成器为最小视口和最大视口分别设置比例。常见组合是手机使用小三度（1.2），桌面使用大三度（1.25）或纯四度（1.333）。这样每一级都会成为独立的 clamp() 值，随视口变宽从小比例过渡到大比例。

如何使用导出的变量

导出内容是一个 :root 代码块，变量名从 --step--2 到 --step-6。把它们分配给元素即可，例如 h1 用第 5 级、h2 用第 4 级、正文用第 0 级、小字用第 −1 级。因为变量名描述的是在比例中的位置而不是元素本身，日后只需修改基准字号和比例，就能调整整套系统。

请留意最大的几级：比例较大时，它们可能超过 WCAG 1.4.4 建议的 2.5 倍缩放上限。表格列出了每一级在范围两端的尺寸，方便你发现增长过快的级别，并在必要时降低桌面端比例。

如何选择比例

1.125 或 1.2 等较小的比例适合信息密集的界面、仪表盘和技术文档；1.25 和 1.333 等中等比例适用范围广，适合营销页面和博客；1.5 或黄金比例 1.618 等较大的比例能营造强烈的编辑排版对比，但需要减少级数才便于使用。

常见问题

需要多少级？

大多数网站使用五到七级：基准以下一两级用于说明和标签，基准用于正文，基准以上三四级用于标题。生成器输出 −2 到 +6 级，不需要的可以直接删除。

博客适合哪种比例？

手机端用小三度（1.2），桌面端用大三度（1.25）或纯四度（1.333），既能让标题清晰，又不会压过正文。

这些变量能在 Tailwind 中使用吗？

可以。写成 text-[length:var(--step-2)]，或者在 Tailwind 主题中把它们注册为字号，就能使用 text-step-2 这样的工具类。

为什么负数级命名为 --step--1？

变量名是 --step- 加上级数，所以第 −1 级就成了 --step--1。这是合法的自定义属性名，也与许多流式字体工具的命名习惯一致。