font-size 支持 transition，但仅限 px、em、rem、vh 等可计算数值单位；关键字、inherit、unset 等不可插值。常见失效原因包括父元素字体变化导致计算链断裂、!important 覆盖、优先级不足、未显式声明初始值等。
font-size 支持 transition 吗？
支持，但有前提：必须是可计算的数值单位（如 px、em、rem、vh），不能是 small、large 这类关键字，也不能是 inherit 或 unset 这类非数值继承值。
为什么有时 font-size 过渡不生效？
常见原因包括：
- 起始或结束值为
em/rem且父元素字体大小在同时变化，导致计算链断裂，浏览器无法插值 - 使用了
!important覆盖了 transition 规则 - CSS 选择器优先级低，被其他样式覆盖，
transition属性未真正应用 - 元素初始状态没有显式声明
font-size，浏览器从initial（通常是medium）开始过渡，而medium不是数值，无法插值
如何写一个可靠 font-size 过渡示例？
推荐统一用 px 或 rem，并确保起始/结束值都明确、可计算。避免依赖浏览器默认值。
button {
font-size: 16px;
transition: font-size 0.3s ease;
}
button:hover {
font-size: 19px;
}
如果要用响应式单位：
立即学习“前端免费学习笔记（深入）”；
html {
font-size: 16px;
}
.text {
font-size: 1rem; /* = 16px */
transition: font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.text.enlarged {
font-size: 1.25rem; /* = 20px */
}font-size 过渡在真实项目中要注意什么？
文字缩放会触发重排（reflow），频繁触发可能影响性能，尤其在动画密集区域；移动端需注意视口缩放与系统字体设置干扰；iOS Safari 对 rem + 动态根字体的过渡偶尔有延迟，建议加 transform: translateZ(0) 强制硬件加速（仅当观察到卡顿才加）。
更关键的是：别为了动而动。字号突变本身易造成阅读中断，过渡时间宜短（≤ 0.3s），缓动用 ease-out 比 ease-in 更自然——人眼对“放大开始”比“放大结束”更敏感。
