font-variation-settings 动画不平滑的关键在于插值方式：浏览器默认将其视为离散字符串，需显式声明 animation-timing-function、确保轴值为统一格式数字、用 @property 注册可插值css变量，并避免 font-weight 干扰及字体加载导致的foit/fout。
font-variation-settings 动画不平滑？关键在 interpolation 方式
Variable Fonts 的动画卡顿，通常不是字体本身问题，而是 font-variation-settings 的值被浏览器当作离散字符串处理，无法自动插值。CSS 动画引擎对这个属性的默认行为是“逐帧硬切”，尤其当轴值（如 'wght' 从 100 跳到 900）跨度大、帧率低时，肉眼明显抖动。
- 必须显式声明
animation-timing-function: linear或带缓动的函数，否则浏览器可能用默认 ease，导致中间段变速更突兀 - 动画起止值必须同为数字（不能混用
"wght" 400和"wght" 400.5），且小数位数一致（400.0vs400.00在部分 Chromium 版本中会被判为不同类型，中断插值） - 避免在
@keyframes中写font-variation-settings: normal—— 这会重置全部轴，而非仅清空某轴，导致其他轴值意外跳变
CSS 自定义属性 + calc() 配合 font-variation-settings 的坑
想用 --weight: 300 控制粗细？直接写 font-variation-settings: "wght" var(--weight) 看似简洁，但 CSS 变量无法被动画引擎识别为可插值数值类型，结果就是整段动画只在首尾两帧生效，中间全靠 JS 补帧或完全不动。
- 正确做法：用
@property显式注册 CSS 自定义属性，并指定syntax: "<number>"</number>和inherits: false，再配合font-variation-settings: "wght" var(--weight) - 注意兼容性：
@property在 Safari 16.4+、Chrome 110+ 支持，Firefox 尚未支持；降级方案只能用 JS +element.animate()手动驱动 - 不要在
calc()里嵌套var(--weight)再传给font-variation-settings——calc()结果仍被视为字符串，不触发数值插值
font-weight 和 font-variation-settings 同时存在时的覆盖逻辑
如果既写了 font-weight: 700，又写了 font-variation-settings: "wght" 350，最终生效的是后者。但很多人误以为 font-weight 是“高层语义”，会映射到 variable font 的 wght 轴并参与动画 —— 实际上它只是初始值，一旦 font-variation-settings 出现，font-weight 就彻底被忽略，且不会响应后续动画变化。
- 动画期间务必只用
font-variation-settings控制 wght 轴，删掉冗余的font-weight声明 - 如果要兼容非 variable fonts，建议用
@supports (font-variation-settings: normal)包裹 variable font 专用样式，避免 fallback 字体被错误应用轴值 - 某些旧版 iOS WebKit 会把
font-weight: 900强制映射成wght=900并覆盖你的font-variation-settings，此时需加!important或改用内联 style
字体加载完成前做动画？FOIT/FOUT 导致的视觉撕裂
Variable font 文件体积大，加载未完成时若已开始动画，浏览器可能先用 fallback 字体渲染几帧，等 variable font 加载完再切回来 —— 文字宽度、行高突变，造成“文字抽搐”。这不是动画本身问题，而是字体加载时机失控。
立即学习“前端免费学习笔记（深入）”；
- 用
font-display: optional或swap配合@font-face的font-display属性，明确控制 fallback 行为 - 更稳妥的做法：监听
document.fonts.load()，等 variable font 加载完成后再添加动画 class，例如document.fonts.load("1em Inter", "Inter").then(() => el.classList.add("animate-weight")) - 避免在
body上全局启用动画，优先作用于已知使用 variable font 的特定<h1></h1>或<button></button>元素，减小 FOIT 影响面
真正难的不是写出能动的代码，而是让每个轴值变化都落在渲染管线的节奏里——浏览器不会告诉你插值失败，它只会静默地跳帧。
