font-size 无法平滑过渡因重排重绘粒度粗、无子像素优化及字体 hinting 切换；推荐用 transform: scale() 配合 will-change 和 transform-origin 实现顺滑缩放。
transition 无法直接平滑缩放 font-size 的原因
直接对 font-size 使用 transition 确实能触发变化，但视觉上常显得“卡顿”或“跳变”，尤其在从 12px 跳到 16px 这类小数值变化时。根本原因不是 CSS 不支持，而是：浏览器对字体渲染的重排（reflow）和重绘（repaint）粒度较粗；font-size 是离散影响布局的属性，插值过程不参与 subpixel 渲染优化；部分字体在中间尺寸下会触发 hinting 切换，造成闪烁或粗细突变。
用 transform: scale() 模拟字体缩放更顺滑
绕过 font-size 自身过渡缺陷的常用做法是保持原始 font-size 不变，改用 transform: scale() 做视觉缩放。它走的是合成层（compositor），不触发重排，GPU 加速，帧率更稳。
- 需配合
transform-origin: left top避免文字整体位移（默认中心缩放） - 必须设置
will-change: transform提前提示浏览器优化（尤其在频繁交互场景） -
scale()放大后文字可能模糊——这是缩放位图字体的固有表现，建议搭配text-rendering: optimizeLegibility和使用 OpenType 字体 - 注意：它只改变渲染尺寸，不改变实际盒模型大小（
line-height、padding等仍按原始字号计算）
button {
font-size: 14px;
transition: transform 0.2s ease-out;
will-change: transform;
}
button:hover {
transform: scale(1.2);
transform-origin: left top;
}
font-size 过渡可用但需满足三个条件
如果必须用原生 font-size 过渡（比如要真实改变行高、影响父容器布局），得同时满足：
- 使用相对单位：
em或rem，避免px在某些浏览器中插值精度丢失 - 确保父元素
line-height也设为无单位数值（如1.4）或em，否则行高不会随字号平滑缩放 - 添加
backface-visibility: hidden可在部分旧版 Chrome/Safari 中减少闪烁
p {
font-size: 1rem;
line-height: 1.5;
transition: font-size 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backface-visibility: hidden;
}
p.expanded {
font-size: 1.25rem;
}
响应式字体 + clamp() + transition 的组合陷阱
用 clamp(1rem, 2.5vw, 1.5rem) 实现响应式字号时，别指望 transition 能平滑过渡——clamp() 是计算函数，每次视口变化都会重算结果，而 transition 只监听属性值变更，不监听函数内部参数变化。结果就是：拖动窗口时字体“一格一格”跳，毫无过渡效果。
立即学习“前端免费学习笔记（深入）”；
真要兼顾响应式与过渡，得拆成两步：用媒体查询控制离散断点，每个断点内再用 font-size + transition 做微调；或者放弃 clamp()，改用 JS 监听 resize 并动态设置带过渡的 style.fontSize。
