clamp()比媒体查询更适合响应式字体，因其支持最小值—首选值—最大值的连续插值缩放，避免阶梯跳跃；需单位统一（推荐rem/vw）、fallback前置、line-height用无单位值，并注意字体加载晃动问题。
clamp() 为什么比 media query 更适合做响应式字体
因为 clamp() 能在单个声明里完成“最小值—首选值—最大值”的连续缩放，而媒体查询只能切片式断点切换，中间是阶梯跳跃。实际排版中，小屏文字突然变大、大屏又突然卡住不增长，用户感知就是“跳”；clamp(1.25rem, 4vw + 0.75rem, 2.25rem) 这种写法，浏览器会实时插值计算，视觉更平滑。
常见错误是把三个值单位混用（比如 clamp(16px, 2em, 100%) ），浏览器会直接忽略整条声明——必须全部用相对单位或全部用绝对单位，推荐统一用 rem 或 vw 搭配 rem。
-
min值建议设为可读下限（如1.125rem），别低于 16px 对应值，否则小屏阅读吃力 -
preferred值要带视口单位（vw最常用），但别光写4vw，得加个偏移（如4vw + 0.75rem）避免在中等屏上过小 -
max值设太高（如3.5rem）在超大屏上会撑开行高甚至破坏布局，建议不超过2.5rem
怎么用 clamp() 替换现有 font-size 声明
不是所有地方都适合一刀切替换。标题类元素（h1–h6）、卡片标题、按钮文字这些有明确层级和视觉权重的，优先上 clamp()；正文段落、列表项、辅助文本建议先保持固定 rem，等整体节奏稳了再渐进优化。
实操时别直接改全局 html 或 body 的 font-size，那会影响所有相对计算。正确做法是逐个选择器覆盖：
立即学习“前端免费学习笔记（深入）”；
h1 {
font-size: clamp(1.5rem, 4.5vw, 2.25rem);
}
.card-title {
font-size: clamp(1.25rem, 3.2vw, 1.875rem);
}- 旧项目里如果用了
em或%做缩放，先统一转成rem，否则clamp()里的计算基准会漂移 - 搭配
line-height时，别用固定数值（如1.2），优先用无单位值，它会自动按当前font-size缩放 - 用 DevTools 实时拖动 viewport 宽度测试，重点看 320px、768px、1200px、1920px 几个关键点是否自然过渡
兼容性与 fallback 怎么写才不掉坑
clamp() 在 Chrome 88+、Firefox 79+、Safari 14.1+、Edge 88+ 原生支持，iOS Safari 14.5+ 开始可用。真正要兜底的只有 iOS 13.x 及更早、Android WebView 旧版本——它们会直接忽略 clamp() 声明，退回到上一条有效 font-size。
所以 fallback 必须写在前面，且不能依赖 CSS cascade 的“后声明覆盖”逻辑：
p {
font-size: 1.125rem; /* fallback for old Safari/WebView */
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}- 千万别写成
font-size: clamp(...); font-size: 1.125rem;，后者会覆盖前者 - 不用 JavaScript 检测，成本高、时机难控；纯 CSS fallback 更轻量也更可靠
- 如果项目还支持 IE，
clamp()无效，但 fallback 已经生效，无需额外处理
line-height 和 font-weight 配合 clamp() 的隐性影响
字体大小动态变化时，line-height 如果写死像素值（如 line-height: 24px），会在小屏上挤成一团，在大屏上又空得吓人。这不是 clamp() 的问题，而是配套属性没跟上。
同样，粗体字（font-weight: 700）在小尺寸下笔画粘连、可读性下降，但 clamp() 不会自动降权。需要手动干预：
-
line-height统一用无单位值（如1.4），它始终相对于当前font-size计算 - 小屏下可加媒体查询微调字重：
@media (max-width: 480px) { h1 { font-weight: 600; } }，避免900在 16px 下糊成黑块 - 别对
clamp()本身套calc()（如clamp(calc(1rem + 0.2vw), ...)），CSS 不支持嵌套函数，会失效
最常被忽略的是：字体加载期间，浏览器用后备字体渲染，此时 clamp() 计算基于后备字体的 metrics，等 Web Font 加载完才重排——如果后备字体和目标字体字宽差异大，会有明显“晃动”。解决办法只有一个：用 @font-face 的 font-display: optional 或预设 size-adjust，但这已超出 clamp() 范畴了。
