font-variation-settings需用单引号包裹轴名并配无引号数字值才生效，如'wght' 700；须关闭font-optical-sizing: none以避免干扰；fallback需兼顾兼容性。
font-variation-settings 怎么写才生效
变量字体不是设个 font-family 就自动可调的，核心控制权在 font-variation-settings。它像一个“阀门”，不打开，所有轴（比如 wght、wdth）都锁死在默认值。
常见错误是只写轴名不写数值，或者数值类型错（必须是数字，不能是字符串）：
/* ❌ 错误：缺数值或用引号 */ font-variation-settings: "wght"; font-variation-settings: 'wght' 700; <p>/<em> ✅ 正确：轴名+无引号数字 </em>/ font-variation-settings: 'wght' 700, 'wdth' 125;
- 轴名必须用单引号包裹，且区分大小写（
wght不是WGT） - 数值范围取决于字体本身，查
fontface.io或用浏览器开发者工具的 Fonts 面板看支持区间 - 不要和
font-weight混用——设了font-variation-settings后，font-weight可能被忽略（尤其在旧版 Safari）
font-optical-sizing 关掉还是开着
font-optical-sizing 是个隐形开关，它让字体根据字号自动微调字形（比如小字号时加粗笔画、放大 x-height）。变量字体常自带这个特性，但开启后可能干扰你手动调的 wght 效果。
典型现象：你在 14px 下设 'wght' 300，看起来却偏重——其实是 font-optical-sizing: auto 在背后悄悄叠加了光学补偿。
立即学习“前端免费学习笔记（深入）”；
- 想完全掌控字重表现，统一设
font-optical-sizing: none - 如果目标是提升小字号可读性且不介意“自动干预”，保留
auto更省心 - Chrome 和 Firefox 默认开，Safari 16.4+ 才支持，旧版 Safari 会直接忽略该声明
如何安全 fallback 到静态字体
变量字体不是全平台覆盖的，尤其 iOS font-variation-settings。靠 @supports 检测比 UA 判断更可靠。
@supports (font-variation-settings: normal) {
.text { font-family: "InterVar", sans-serif; }
.text { font-variation-settings: 'wght' 500; }
}
@supports not (font-variation-settings: normal) {
.text { font-family: "Inter", sans-serif; }
}- 别用
@supports (font-variation-settings)——语法不完整，会被当成无效条件 - fallback 字体的字重映射要对齐：比如变量字体
'wght' 500对应静态字体的font-weight: 500，否则视觉跳变明显 - WebFont 加载期间，浏览器可能先渲染 fallback 再替换，用
font-display: swap减少布局抖动
font-display 和加载性能怎么平衡
变量字体文件通常比单个静态字体大（尤其含多轴），但比加载一整套静态字体（regular/medium/bold/extra-bold）小得多。关键不在“要不要用”，而在“怎么不让它卡住首屏”。
最易踩的坑是设 font-display: block 还不配预加载，导致文本长时间空白；或者设 swap 却没处理 FOIT/FOUT 的突兀切换。
- 对核心文本（如标题），用
font-display: optional+<link rel="preload">提前拉取，兼顾性能与一致性 - 避免在
@font-face中漏写format('woff2')，否则部分浏览器会降级加载更大的 woff - Chrome DevTools 的 “Coverage” 面板能查出哪些字体轴实际没被用到，可考虑用 fonttools 工具子集化裁剪
变量字体的配置难点不在语法，而在于每个声明都在和浏览器渲染管线、字体解析器、甚至系统字体引擎打交道。一个 font-variation-settings 值没生效，可能是字体本身没打包对应轴，也可能是父元素写了 font-weight 覆盖了它，还可能是 CSS 层叠顺序里它被后面规则干掉了——得一层层扒 DOM 样式面板，而不是只盯代码。
