字阶与流体字体 (clamp)

字阶与流体字体 (clamp): 用途

为手机和电脑选择基础字号和比例（从小二度到黄金比例），以及各自的屏幕宽度。工具会计算两种屏幕上的 h1、h2、h3、h4、h5、正文和小号文字的大小，并以 rem 为单位为每一级生成 clamp()。

预览会用每个字号显示你的文字，可切换手机或电脑，CSS 输出时带有现成的变量。

使用方法

1. 为手机和电脑选择基础字号和比例。
2. 查看每一级的预览。
3. 复制 CSS 变量。

使用场景

• 为新网站确定字号。
• 无需媒体查询、自动适应手机的标题。
• 为设计系统建立字体排印。

常见问题

什么是字阶？

它是一组字号序列，每一级都是上一级乘以同一个比例，比如 1.25（大三度）。各级标题彼此成比例，网站看起来比随意选择字号更有条理。

clamp() 是怎么工作的？

clamp(最小值, 首选值, 最大值) 让字体随屏幕宽度增大（首选值使用 vw），但不会超出限制。这样标题在手机上是一种大小，在电脑上是另一种大小，而无需媒体查询。

为什么使用 rem？

使用 rem 时，字号会遵循用户浏览器的字号设置，这对放大字体以便阅读的人很重要。工具采用 1rem = 16px。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具