css 过渡与字体大小变化_平滑变化字体大小的技巧

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。