跳到主要内容

CSS clamp() 流式字号生成器:整套 h1 到 small 字号表 实时预览 一键复制 CSS / Tailwind / SCSS

CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。
px
px
px
px
推导 (Mike Riethmuller 2016 原文)
斜率 A = (最大字号 - 最小字号) / (最大视口 - 最小视口) × 100   (单位 vw)
截距 B = (最小字号 - A × 最小视口 / 100) / 16   (单位 rem)
clamp(最小字号, calc(A vw + B rem), 最大字号)
层级最小最大CSS clamp()
h161.0352px100.9842pxclamp(3.8147rem, calc(3.699vw + 2.9824rem), 6.3115rem)
h248.8281px75.7571pxclamp(3.0518rem, calc(2.4934vw + 2.4907rem), 4.7348rem)
h339.0625px56.832pxclamp(2.4414rem, calc(1.6453vw + 2.0712rem), 3.552rem)
h431.25px42.6347pxclamp(1.9531rem, calc(1.0541vw + 1.7159rem), 2.6647rem)
h525px31.984pxclamp(1.5625rem, calc(0.6467vw + 1.417rem), 1.999rem)
h620px23.994pxclamp(1.25rem, calc(0.3698vw + 1.1668rem), 1.4996rem)
body16px18pxclamp(1rem, calc(0.1852vw + 0.9583rem), 1.125rem)
small12.8px13.5034pxclamp(0.8rem, calc(0.0651vw + 0.7853rem), 0.844rem)
视口宽度800px

拖滑块在最小和最大视口之间扫描, 字号实时跟变

人有悲欢离合 月有阴晴圆缺 此事古难全
H2 · 人有悲欢离合 月有阴晴圆缺 此事古难全
H3 · 人有悲欢离合 月有阴晴圆缺 此事古难全
H4 · 人有悲欢离合 月有阴晴圆缺 此事古难全
H5 · 人有悲欢离合 月有阴晴圆缺 此事古难全
H6 · 人有悲欢离合 月有阴晴圆缺 此事古难全

横看成岭侧成峰, 远近高低各不同。不识庐山真面目, 只缘身在此山中。月落乌啼霜满天, 江枫渔火对愁眠。

small · 横看成岭侧成峰, 远近高低各不同。不识庐山真面目, 只缘身在此山中。月落乌啼霜满天, 江枫渔火对愁眠。

h1 {
  font-size: clamp(3.8147rem, calc(3.699vw + 2.9824rem), 6.3115rem);
}

h2 {
  font-size: clamp(3.0518rem, calc(2.4934vw + 2.4907rem), 4.7348rem);
}

h3 {
  font-size: clamp(2.4414rem, calc(1.6453vw + 2.0712rem), 3.552rem);
}

h4 {
  font-size: clamp(1.9531rem, calc(1.0541vw + 1.7159rem), 2.6647rem);
}

h5 {
  font-size: clamp(1.5625rem, calc(0.6467vw + 1.417rem), 1.999rem);
}

h6 {
  font-size: clamp(1.25rem, calc(0.3698vw + 1.1668rem), 1.4996rem);
}

body {
  font-size: clamp(1rem, calc(0.1852vw + 0.9583rem), 1.125rem);
}

small, .text-small {
  font-size: clamp(0.8rem, calc(0.0651vw + 0.7853rem), 0.844rem);
}

这个工具能做什么

不只输出一行 clamp(), 而是整套排版字号体系都生成的流式字号工具。 填进正文的最小字号、最大字号、关心的视口区间 (默认 360 移动 → 1440 桌面), 给小屏和大屏各挑一个模数比例 (小二度 1.067 / 大二度 1.125 / 小三度 1.2 / 大三度 1.25 / 纯四度 1.333 / 黄金比例 1.618), 工具就 把 h1 到 small 一共 8 档每一档独立算出一条 clamp(), 表格里一次看 完, 每行都是可以直接粘走的 CSS 声明。 公式用的是 Mike Riethmuller 2016 在 CSS Tricks 那篇 "Modular Fluid Typography" 里推的那一套:vw 单位的斜率 A、rem 单位的截距 B, clamp 在两端兜底。推导过程在一个折叠块里, 不让你把工具当黑盒用。 360-1920 的视口宽滑块直接在工具里实时扫描整条 clamp 曲线, 每一档标题、正文跟着拖动同步变, 480px 长什么样、768px 长什么样、 1024px 长什么样, 不用反复改浏览器窗口大小或者开 DevTools 就一清二楚。 4 种导出格式覆盖所有项目类型: 原生 CSS 规则 (h1{...} h2{...} body{...}); CSS 自定义属性 (--text-h1 到 --text-small, design token 项目直接接); SCSS @mixin (sass 项目里 @include 一行搞定); 可以直接粘到 tailwind.config.js 的 theme.extend.fontSize 配置块。 rem 和 px 单位一键切换,默认 rem (尊重用户字号偏好, 无障碍达标), 老项目还在用 px 也提供。 4 个快捷预设直接覆盖常见场景:移动优先 (16→18), 长文阅读 (18→20), 营销页 (17→21), 紧凑仪表盘 (14→16)。 所有参数都接 URL, 调好的字号 表发链接给设计师, 对方一打开就是同一份, 不用截图也不用解释。 100% 浏览器本地运算, 0 网络请求, 0 依赖,整套数学就 30 行算术。

工具细节

输入
数值 + 结构化内容
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 18 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
生成器 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

CSS clamp() 流式字号生成器 适合怎么用

适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。

适合生成任务

  • 从空白开始,先拿到一版可修改的结果。
  • 生成可重复使用的草稿、名称、模板或占位素材。
  • 先探索多个选项,再挑最适合当前任务的。

生成检查项

  • 生成内容发给客户、上页面或进文档前,必须人工看过。
  • 有品牌语气、格式或受众要求时,不要沿用默认值。
  • 只保留真正符合任务的部分。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 颜色格式转换 HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK 五种互转:实时色板 + 对比度,浏览器本地 打开
  2. 2 字号比例阶生成器 选基准字号 + 比例(纯四度、黄金比例…)即得整套模块化字号阶,px / rem 双单位、实时大字预览,一键导出 CSS / Tailwind / SCSS,全程浏览器本地 打开
  3. 3 CSS 阴影生成器 Pro CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。 打开

真实使用场景

  • 24 行 @media font-size 媒体查询, 一次性换成 1 段 CSS

    你的样式表里 h1 到 h6 加 body / small, 每档配 2-3 个 @media 断点, 每个断点写一个 font-size,加起来 24 行 CSS 没人想动。 在这里生 成一次 scale, 复制 "CSS 规则" 导出粘进去。 8 行 `font-size: clamp(...)` 把整套 24 行替掉, 360 到 1440 视口内排版 全程一致; 下次设计师调整, 你重跑工具粘新的 8 行,不用考古 那堆媒体查询。

  • 5 分钟锁死设计系统的字号 token

    团队要上线一套新的设计系统, 字号要走 CSS 变量。 挑一个跟品牌调 性匹配的 body 字号和 ratio, 导出 "CSS 变量", `:root { --text-h1: clamp(...) }` 一段粘到 tokens 文件。 所有需 要标题的组件都引用 `var(--text-h1)`, 想改 scale 只动一处。 从 "我们需要字号 token" 到"我们有了字号 token" 5 分钟。

  • 不手算、把 Figma 的流式字号规格落到 CSS

    设计师丢一个 Figma 文件:"h1 从 375 到 1440 视口在 48px → 72px 之间插值"。 以前你要打开计算器手算斜率, 选 3 个中间断点验证, 写 clamp, 然后发现 rem 和 px 搞混了截距错了。 现在填 4 个数, 复制 clamp(), 完事。 拖视口滑块验证 375 处是 48px、 1440 处是 72px (一定是, 这是数学保证的)。 3 分钟 vs 30 分钟。

  • 整理老 SCSS 项目里散落的 font-size 声明

    接手一个 40k 行的 SCSS 项目, font-size 出现 60 个不同的具体值, 散布在各模块里。 在这里定一个能覆盖现有视觉范围的流式 scale, 导出 "SCSS @mixin", 放进项目的公共 partial。 然后 codemod 把 `font-size: 21px` 这类换成 `@include fluid-type('h4')`, 最终样式 表只有 8 个 fluid token, 不再是 60 个静态值。 bundle 更小, 排 版统一, 改一次全局生效。

  • 验证 h1 在你真支持的所有视口都看得过去

    流式字号最常翻车的场景:你按 1440 桌面调出一套好看的 scale 就 上线, 然后有人 360 手机打开发现 h1 跌出三行, 因为最小字号设 得太大了。 把视口滑块从 360 拖到 1920, 实时预览全程跟看,h1 在 360 处折得难看, 你在提交前就发现, 不是 QA 提 bug 后才知道。 这是这个工具里最有用的一个交互, 大家都会忘记测小屏一端。

  • 给 Tailwind 项目加流式字号, 又不放弃现有 utility 类

    你的团队在用 Tailwind 标准的 `text-sm / text-base / text-xl` utility。 想上流式字号, 又不想把整个项目的 utility 类全换掉。 导出 Tailwind 配置块, 用语义 key (h1 / h2 / body) 粘到 `theme.extend.fontSize` 下面, 只在需要流式的地方用新的: 标题上 `class="text-h1"`, 其它地方继续用现有的 `text-sm`。 渐进式迁移:新组件上流式, 老组件 utility 保持原状不动。

常见踩坑

  • 给最小档字号设得太小。 body 设 14px 听着合理, 但 `small` 比 body 小一档,1.333 ratio 下就是手机上 10.5px, Lighthouse 会标, 用户也看不清。 上线前先看一眼 small 那一行的"最小"列。

  • 小屏和大屏选了同一个 ratio。 出来的就是一条平直的流式 scale, 各视口形态都一样, 完全失去双 ratio 的意义,双 ratio 就是为了"小屏克制、大屏放开"。 用 1.2 → 1.333 或者 1.25 → 1.414, 才算真在用这个特性。

  • 把视口范围跟布局断点搞混。 工具里的最小/最大视口定义的是 clamp 在哪个区间"插值", 不是布局在哪里换 grid。 小于最小视口字号停在最小, 大于最大停在最大。 布局重排还是要靠单独的 @media 断点。

  • 因为 "rem 难写" 选了 px 输出。 rem 一点都不难, 就是 `值 / 16`。 用 px 输出会破坏用户的字号偏好 (无障碍倒退), 而且失去"字号跟着缩放走"这个流式字号本来要给你的好处。 用 rem。

  • 忘了 clamp() 必须三个参数。 不小心只复制了 calc() 那段, 浏览器会静默忽略整条规则。 一定复制完整的 `clamp(min, calc(...), max)`。工具的整行导出已经替你做了这件事。

  • 把最大视口设成实际设备的最大宽度 (1920+)。 流式字号应该比布局本身更早停止变化。 上限放 1440 或 1536 就够, 再往上字号不需要继续涨, 排版会显得"飘"。

隐私说明

你输的每一个数字、选的每一个比例、切换的每一种导出格式,全部留在 你的浏览器里。 工具是嵌在 Astro 静态页面上的一个 React 岛, 数学完全 前端计算, 没有任何服务端 endpoint 参与, 不打点不分析你调了什么值, 不统计你点了哪个预设。 分享 URL 里只有配置本身 (最小/最大字号、最 小/最大视口、ratio、输出单位), 没有用户 ID, 没有 session token, 没有跟踪参数。 视口预览滑块的位置故意不进 URL,那是"我现在在看 什么", 是本地状态, 不是配置, 强行同步反而干扰对方。 打开工具、调 好字号、关掉标签页,没有一个字节离开你的设备。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-13