clamp()三个参数顺序不可颠倒，因浏览器严格按min→preferred→max线性插值计算；min和max须为固定单位（如rem）确保边界，preferred须含vw等动态单位实现响应式，否则退化为静态值。
clamp() 是目前最直接、最可控的响应式字体实现方式，不需要媒体查询，也不依赖 JavaScript，但用错参数会导致字体在某些视口下“卡死”或跳变。
为什么 clamp() 的三个参数顺序不能颠倒？
它的语法是 clamp(min, preferred, max)，不是 min/max/preferred 或其他排列。浏览器按「最小值 → 优选值 → 最大值」线性插值计算，顺序错了就完全失效。
-
min必须是固定单位（如1rem），否则在小屏下可能缩到不可读 -
preferred通常用视口单位（如2.5vw），它是中间的“弹性基准” -
max也必须是固定单位（如2.25rem），否则大屏下会无限放大 - 如果把
max写成4vw，那它在超宽屏上反而比preferred小，导致字体突然回退
怎么选 preferred 值让字体在主流设备上自然过渡？
别凭感觉写 3vw，先算出关键断点处的理想字号，再反推线性关系。比如希望：375px 时为 1.125rem（18px），1440px 时为 2.25rem（36px）。
- 用公式
preferred = min + (max - min) / (max-width - min-width) * (100vw - min-width)换算后，常用近似写法是clamp(1.125rem, 1.125rem + 1.5vw, 2.25rem) - 更稳妥的做法是直接用 CSS calc：
clamp(1.125rem, calc(1.125rem + 1.5vw), 2.25rem) - 注意：Chrome 93+ 支持
calc()在clamp()内部，旧版 Safari（≤15.4）不支持，需加降级font-size: 1.5rem
哪些场景下 clamp() 会失效或表现异常？
它不是万能的，遇到以下情况会偏离预期：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
font-size: 0（常见于清除 inline-block 间隙），导致所有 rem 计算归零 - 使用了
transform: scale()或zoom，vw仍按视口原始尺寸计算，视觉效果失真 - 在 iframe 内或 shadow DOM 中，部分旧版浏览器对
vw解析不一致 - 设置
font-size: clamp(...)后又用em做行高，若line-height没同步响应，会出现行距塌陷
真正难的不是写对那行 clamp()，而是确认 min/max 的绝对值是否贴合设计系统的真实可读性边界——小到 14px 还能看清字形细节吗？大到 36px 在 4K 屏上会不会挤占太多垂直空间？这些得实机测，不能只看 DevTools 里的数值。
