直接对 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 更语义化——选哪个，看你的兼容性要求和场景复杂度。