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

---

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

keywords:

• 可变字体
• font-variation-settings
• wght
• wdth
• opsz

description: 使用可变字体的轴控制与 font-variation-settings/font-optical-sizing 构建一致且灵活的排版系统，并给出性能与兼容建议。

categories:

• 文章资讯
• 编程技术

---

概述

可变字体将多个样式打包为一个字体文件，通过轴（如 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_guide
• web.dev：Variable fonts — https://web.dev/articles/variable-fonts