⚙️ 视口设置
📐 字体层级设置
设置每个层级在最小/最大视口下的字体大小（px），自动计算clamp()值
👁️ 响应式预览
📋 生成的CSS代码
流式字体生成器能做什么？
流式字体生成器使用CSS clamp()函数，让字体大小随视口宽度平滑变化，无需媒体查询断点。设置最小和最大视口宽度以及对应的字体大小，即可自动计算fluid typography代码。
核心功能
- 🌊 CSS clamp()计算 — 自动计算clamp(min, preferred, max)值
- 👁️ 实时预览 — 拖动滑块模拟不同视口宽度下的字体效果
- 📐 多层级管理 — 同时管理多个字体层级（h1-h6、body等）
- 📋 CSS变量导出 — 一键导出完整的CSS变量代码
- 🔧 自定义视口范围 — 灵活设置最小/最大视口宽度
扩展知识
Fluid Typography的核心公式：font-size: clamp(min, min + (max - min) * ((100vw - minVp) / (maxVp - minVp)), max)。CSS clamp()函数在2020年被所有主流浏览器支持，是目前实现响应式字体的最佳方案。相比媒体查询，clamp()让字体在任意视口宽度下都平滑过渡，没有断点跳变。
常见问题 FAQ
什么是流式字体？
流式字体使用CSS的clamp()函数，让字体大小随视口宽度平滑变化。不同于媒体查询的断点跳变，流式字体在任意屏幕尺寸下都能保持最佳阅读体验。
CSS clamp()函数是什么？
clamp(min, preferred, max)返回一个在最小值和最大值之间的值。常用于响应式字体：clamp(1rem, 2.5vw, 2rem)。
如何选择视口范围？
最小视口通常设为320px（最小手机宽度），最大视口设为1200px或1440px（桌面端）。也可以根据你的设计断点来设置。
流式字体和媒体查询哪个好？
流式字体优势：无断点跳变、代码更简洁、任意尺寸都适配。媒体查询优势：精确控制特定断点。现代项目推荐使用clamp()，浏览器支持率已超过95%。
生成的代码如何使用？
将生成的clamp()值直接用在CSS的font-size属性中。例如：h1{font-size:clamp(1.5rem, 4vw, 3rem)}。也可以复制CSS变量版本统一管理。