本文详解 anybody 变量字体中 `font-stretch` 失效的常见原因，指出 google fonts 加载 url 中宽度轴范围（`wdth,50..200`）超出字体实际支持范围（仅 `50..150`）是核心问题，并提供可立即生效的修复方案与最佳实践。
在使用 Google Fonts 提供的变量字体（Variable Fonts）时，font-stretch 属性能否生效，不仅取决于 CSS 写法是否规范，更关键的是——字体文件本身是否被正确加载其完整可变轴范围。以 Anybody 字体为例，它确实支持宽度轴（wdth），但官方字体规格明确限定其有效宽度范围为 50–150（参考 Google Fonts Anybody 测试器）。而原始代码中 @import URL 错误地声明了 wdth,50..200：
/* ❌ 错误：超出 Anybody 实际支持的 wdth 范围 */
@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,50..200,wght,100..700&display=swap');该写法会导致 Google Fonts 服务无法返回包含完整 wdth 轴数据的字体子集（甚至可能回退为静态字体），致使后续 font-stretch: 50% 完全无效。
✅ 正确做法是严格匹配字体实际支持的轴范围：
/* ✅ 正确：wdth 精确设为 50..150 */
@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,50..150,wght,100..900&display=swap');
h1 {
font-family: 'Anybody', sans-serif;
font-weight: 900;
font-stretch: 50%; /* 现在将可靠触发超细压缩效果 */
}? 验证技巧：打开浏览器开发者工具 → Network 标签页 → 过滤 .woff2 文件 → 查看响应头或字体元数据，确认 wdth 轴是否在 fvar 表中被声明（值域应为 50–150）。
⚠️ 注意事项：
- font-stretch 的百分比值需落在字体支持范围内（如 50% 对应 wdth 50，150% 对应 wdth 150），超出即无效果；
- 建议始终通过 Google Fonts 字体详情页的 Tester 工具 查验各轴（wdth, wght, ital）的实际取值区间；
- 若需兼容旧浏览器，可添加 @supports (font-stretch: 50%) 条件规则进行渐进增强。
综上，变量字体不是“声明即生效”，而是“精准加载 + 合理调用”的组合工程。修正 @import 中的轴范围，是解锁 font-stretch、font-variation-settings 等高级特性的第一步，也是最关键的一步。
