"变量字体优化：Variable Fonts 的轴与性能实践"

概述Variable Fonts 将多个字体样式（粗细、斜体、光学尺寸等）集成到单一文件，通过插值生成连续样式，减少字体文件数量与请求，实现更灵活的排版与更好的性能。常用轴与用法常见轴：`wght`（粗细）、`ital`（斜体）、`opsz`（光学尺寸）等；部分字体提供额外自定义轴［参考1,2］。用法：body { font-family: 'InterVariable', system-ui, sans-serif; } h1 { font-variation-settings: 'wght' 700, 'opsz' 16 } 光学尺寸：以不同字号优化可读性与对比度；需测试不同设备与主题下的效果。性能与工程减少请求：单文件覆盖多样式；与 `preload` 结合加速关键字体加载。可访问性：确保对比度与字号可读；在 `prefers-reduced-motion` 环境下避免过度字体动画。兼容性：提供非变量回退；测试在旧设备上的渲染一致性。参考与验证［参考1］MDN 中文：变量字体概览与轴说明与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_fonts/Variable_fonts_guide［参考2］web.dev：Variable Fonts 的性能与排版实践指南：https://web.dev/articles/variable-fonts［参考3］Google Fonts：变量字体资源与示例：https://fonts.google.com/knowledge/introducing_type/variable_fonts关键词校验关键词与变量字体/轴/性能一致。