可变字体需配合 format("woff2-variations")、preload+crossorigin、font-optical-sizing: none 及 @property 注册动画变量才能生效，任一环节出错即失效。
可变字体（Variable Fonts）本身不能“加速加载”，但它能显著减少请求数和总字节，配合正确策略才能在移动端真正起效——否则反而因格式兼容性或加载时机问题导致更差体验。
font-variation-settings 必须显式声明才生效
很多项目引入了 InterVar 或 Roboto Flex，但文字粗细/宽度没变化，根本原因不是字体没加载，而是 CSS 没触发轴控制。浏览器不会自动根据 font-weight 映射到 wght 轴，必须手动开阀：
-
font-variation-settings的轴名必须用单引号包裹，数值不加引号：'wght' 600，写成"wght" 600或'wght' '600'都无效 - 不要混用
font-weight和font-variation-settings：一旦后者出现，前者被完全忽略，动画中尤其容易出错 - 移动端 Safari（≤16.3）不支持
font-variation-settings，需用@supports (font-variation-settings: normal)包裹，且 fallback 字体的font-weight必须严格对齐（如变量字体'wght' 500→ 静态字体font-weight: 500）
preload + font-display: swap 组合必须带 format("woff2-variations")
只写 url("InterVar.woff2") 不够，旧版 Safari 和部分 Android WebView 会直接跳过整条 @font-face 规则，退回到阻塞渲染行为：
-
@font-face中src必须明确声明format("woff2-variations")，不能省略或写成format("woff2") -
<link rel="preload">的type必须为font/woff2（不是font/woff2-variations），且必须带crossorigin属性，否则预加载失效 - WOFF2 可变字体体积通常比多套静态字体小 40%~60%，但单文件仍可能达 800KB+；若首屏只用 Regular/Medium，子集化后体积可压至 300KB 内，比加载两套静态字体更优
font-optical-sizing 默认开启会干扰 wght 动画
在 iOS Safari 和 Chrome for Android 上，font-optical-sizing: auto（默认值）会在小字号时自动加粗、放大 x-height，导致你设的 'wght' 300 看起来像 400 —— 这不是 bug，是光学补偿在“帮忙”：
- 想精确控制字重表现，统一加
font-optical-sizing: none，尤其在做动态粗细切换或响应式字号时 - 该属性在 Safari 16.4+ 才被识别，旧版忽略；Chrome/Firefox 默认开启，但开启后与
font-variation-settings共存时插值不稳定 - 动画中若未关掉它，
font-variation-settings插值会叠加光学补偿，造成“抖动感”，肉眼可见不平滑
font-variation-settings 动画必须用 @property 注册才能插值
直接用 CSS 变量驱动 font-variation-settings: "wght" var(--weight) 在所有移动端浏览器里都无效——变量值被当字符串处理，动画只在起点和终点生效：
- 必须用
@property显式注册可动画变量：@property --weight { syntax: "<number>"; inherits: false; initial-value: 400; }</number> - Chrome 110+、Safari 16.4+ 支持，Firefox 当前不支持，降级方案只能靠 JS 的
element.animate()手动驱动 - 动画关键帧里禁止出现
font-variation-settings: normal，它会清空全部轴，导致其他正在动画的轴（如'wdth'）意外重置
真正卡住移动端可变字体落地的，从来不是格式支持，而是加载链路里任意一环没对齐：format() 声明漏写、preload 缺 crossorigin、font-optical-sizing 没关、动画变量没注册——四个点里只要一个错，效果就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
