font-size 不支持直接 transition 动画，需用 rem + CSS 自定义属性或 transform: scale() 实现可控过渡；JavaScript 动态修改时须用 getComputedStyle 强制触发。
font-size 本身不支持 transition 动画
直接给 font-size 加 transition 在多数情况下不会生效，尤其是从 em、rem 切换到 px，或初始值为 inherit / initial 时。浏览器无法插值计算“无明确数值”的尺寸，会跳变或完全不动。
- 触发动画的前提是：起始值和结束值都必须是可计算的绝对长度单位（如
px、pt）或同一种相对单位（如都是rem，且根字体大小固定） - 用
em时要注意父级字体变化会连锁影响，导致插值结果不可控 - 如果元素初始
font-size: medium或font-size: inherit，transition 会被忽略
用 rem + CSS 自定义属性实现可控过渡
把字号逻辑收口到 :root，用 font-size 自定义属性控制基准，再让子元素用 rem 挂钩。这样只需过渡一个数字，稳定可靠。
:root {
--text-scale: 1;
}
h1 {
font-size: calc(var(--text-scale) * 1.5rem);
transition: font-size 0.3s ease;
}
/ 触发缩放 /
h1.zoomed {
--text-scale: 1.4;
}
- 必须用
calc()包裹，否则修改--text-scale不会触发font-size重算 -
transition写在基础选择器（如h1）上，不是写在.zoomed上 - 避免在
:root直接设font-size: calc(...)，部分旧浏览器不支持过渡根字体
用 transform: scale() 替代 font-size 动画更稳妥
如果只是视觉缩放、不涉及布局重排或文本可访问性（如屏幕阅读器需读取真实字号），transform: scale() 是最兼容、最顺滑的方案。
.scalable-text {
display: inline-block;
transform-origin: center;
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scalable-text.enlarged {
transform: scale(1.25);
}
-
transform触发 GPU 加速，比font-size过渡更流畅，尤其在低端设备 - 注意加
display: inline-block（或block），否则transform-origin对纯内联元素行为不稳定 - 缩放后元素占据的文档流空间不变，可能遮挡其他内容——这是它和
font-size的本质区别
JavaScript 配合 getComputedStyle 强制触发过渡
当必须用 JS 动态改 font-size 且要动画时，不能直接连续赋值，得“打断”浏览器优化：
立即学习“前端免费学习笔记（深入）”；
function animateFontSize(el, targetSize) {
el.style.transition = 'font-size 0.3s ease';
// 强制重排，让浏览器记住当前值
window.getComputedStyle(el).fontSize;
el.style.fontSize = targetSize;
}- 关键在
window.getComputedStyle(el).fontSize这一行——它强制同步获取当前渲染值，使 transition 有起点 - 不要省略单位，
targetSize必须带单位（如'24px'），否则无效 - 多次调用前建议先清空
style.transition，避免叠加过渡时间造成混乱
浏览器对 font-size 过渡的支持依然存在隐性边界，真正需要精确字号响应的场景（比如适配不同阅读模式），优先走 rem + 自定义属性；只要求视觉反馈，transform: scale() 几乎零踩坑。
