CSS流体排版生成器
生成CSS clamp()排版比例尺(XS至4XL),在最小和最大视口宽度之间平滑插值字体大小,带有实时可调整大小的预览和基础的插值数学公式。完全在您的浏览器中运行。
输入
在最小视口宽度处的基础字体大小。
在最大视口宽度处的基础字体大小。
在此宽度以下,字体大小保持在最小值固定不变。
在此宽度以上,字体大小保持在最大值固定不变。
在最小视口宽度处,每个步级相对于上一个步级的增长幅度。
在最大视口宽度处,每个步级相对于上一个步级的增长幅度。
关闭时,输出普通的.text-xs / .text-base / …实用程序类块。
输出
Your type scale will appear here.
隔离Shadow DOM中的真实clamp()规则 — 调整浏览器窗口大小时实时看到缩放效果。
| 步级 | 最小 | 最大 | clamp() |
|---|---|---|---|
| No data yet | |||
上面实时预览所呈现的演示标记 — 每个步级的示例文本,不打算按原样粘贴。
驱动上面实时预览的内容 — 与CSS输出相同的clamp()规则,应用于演示标记的类。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-fluid-typography-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"minFontSize": "16",
"maxFontSize": "20",
"minViewport": "320",
"maxViewport": "1200",
"minRatio": "1.2",
"maxRatio": "1.25",
"outputUnit": "rem",
"asCustomProperties": "true"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-fluid-typography-generator` tool (CSS Fluid Typography Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-fluid-typography-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS流体排版生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能说明
固定的font-size媒体查询断点会在几个宽度处使文本突然跳变。流体排版在视口调整大小时连续缩放字体大小,使用CSS clamp()将结果限制在最小和最大大小之间。此工具从两个字体大小、两个视口宽度和每端的比例尺系数生成完整的8级排版比例尺(XS至4XL),使用clamp()规则 — 没有固定断点,没有跳变。
使用方法
- 设置最小字体大小和最小视口宽度 — 文本停止缩小的基础字体大小。
- 设置最大字体大小和最大视口宽度 — 文本停止增长的基础字体大小。
- 选择每端的比例尺系数(小三度、大三度、完全四度等) — 每个步级(SM → 基础 → LG → XL…)相对于前一个步级的增长幅度。在每端使用不同的比例尺系数允许标题在屏幕变宽时比正文增长得更快,这在流体排版系统中很常见。
- 为输出选择rem或px,以及是否输出CSS 自定义属性(
--font-base: clamp(...))或普通实用程序类(.text-base { font-size: clamp(...); })。 - 将CSS输出直接复制到您的样式表中。
实时预览将生成的clamp()规则挂载在隔离的Shadow DOM中 — 调整实际浏览器窗口的大小,示例文本将实时缩放,与在您网站上的表现完全相同。
数学原理
每个步级的clamp()由标准线性插值公式构建:slope = (maxSize − minSize) / (maxViewport − minViewport),然后preferred = (minSize − minViewport × slope) + slope × 100vw。此首选值随视口宽度线性增长,并由clamp(minSize, preferred, maxSize)限制,因此结果在minViewport处精确匹配minSize,在maxViewport处精确匹配maxSize,并在二者之间平滑插值。在最小视口以下或最大视口以上,大小保持固定在相应的边界。排版比例尺细目表显示了每个步级的计算出的最小值/最大值和生成的clamp()字符串。
为什么不直接使用媒体查询?
媒体查询在一个固定的像素宽度处改变font-size,因此在断点被超过时文本会立即跳变。基于clamp()的流体排版在您两个断点之间的整个范围内连续缩放,因此不会有明显的跳变 — 也不需要为每个设备正确选择断点。
是否适用于所有浏览器?
clamp()和vw单位自2020年以来就在所有主要浏览器中得到支持,因此除了先于CSS自定义属性的非常旧的浏览器外,它可以在任何地方工作。
相关工具
需要将大小转换为另一个方向?使用像素、REM & EM 转换器在单位之间转换单个值。对于基于断点(而非流体)的响应式规则,请参阅CSS 媒体查询生成器。有关同样风格的交互式缓动曲线生成器,请参阅CSS 立方贝塞尔生成器。
隐私
一切都在您的浏览器中运行 — 没有字体大小或设置被发送到服务器。