直接对 font-size 使用 transition 无效，应改用 transform: scale() 实现平滑缩放；或在新浏览器中用 CSS 自定义属性配合 clamp() 和 transition。
直接对 font-size 使用 transition 是无效的——CSS 动画不支持字体大小的平滑过渡，因为 font-size 是离散的、非线性变化的属性，浏览器无法插值计算中间状态（尤其在不同单位混用或涉及字体度量时）。
改用 transform: scale() 模拟缩放效果
这是最稳定、兼容性最好、性能最高的方案。不改变实际字号，而是通过视觉缩放实现“变大变小”的平滑感：
- 保持原始
font-size不变（比如始终是16px），用transform: scale(1)作为默认态 - 悬停或激活时改为
transform: scale(1.2)，并添加transition: transform 0.3s ease - 注意：
scale()会影响整个元素（含内边距、行高视觉比例），若需精确控制布局，可配合transform-origin或额外包裹一层容器
用 CSS 自定义属性 + clamp() + transition 配合动画
现代方案（需较新浏览器支持），适合响应式字号渐变：
- 定义一个自定义属性，如
--fs-factor: 1，再用font-size: clamp(1rem, 1rem + 1vw, 1.5rem)结合它做动态计算 - 对
--fs-factor添加transition: --fs-factor 0.3s ease（Chrome 110+、Firefox 111+ 支持自定义属性过渡） - JS 中修改该变量：
el.style.setProperty('--fs-factor', '1.3')，字体将平滑响应
避免常见陷阱
以下做法看似可行，实则不可靠或有副作用：
立即学习“前端免费学习笔记（深入）”；
-
不要写
transition: font-size 0.3s—— 大部分浏览器会忽略，或只在极少数单位组合（如 px→px）下勉强生效，但行为不一致 -
慎用
em/rem动态继承 + transition —— 父级字号变化会触发重排，且子元素过渡不同步，易卡顿 -
不要依赖 JavaScript 逐帧修改
font-size—— 强制同步布局 + 高频重排，严重掉帧
真正平滑的关键不是“动字号”，而是“动视觉比例”。用 transform 最省心，用 custom property + clamp 更语义化——选哪个，看你的兼容性要求和场景复杂度。
