CSS 可变字体：font-variation-settings 与 opsz wght wdth

概述可变字体将多个样式打包为一个字体文件，通过轴（如 `wght`/`wdth`/`opsz`）调节外观，减少资源数量并提升适配能力。用法/示例@font-face { font-family: 'InterVar'; src: url('/fonts/Inter-Var.woff2') format('woff2'); font-weight: 1 1000; /* 可变范围 */ } .title { font-family: 'InterVar'; font-optical-sizing: auto; font-variation-settings: 'wght' 650, 'wdth' 100, 'opsz' 16; } 工程建议使用 `font-optical-sizing: auto` 让浏览器根据字号优化细节。控制轴范围与级数，减少视觉不一致；对不支持环境提供静态切片回退。结合子集化与 `unicode-range` 减少体积与下载时间。参考与验证MDN：Variable fonts — https://developer.mozilla.org/docs/Web/CSS/CSS_fonts/Variable_fonts_guideweb.dev：Variable fonts — https://web.dev/articles/variable-fonts