本文详解 anybody 变量字体中 `font-stretch` 失效的根本原因：google fonts 加载 url 中声明的 `wdth` 轴范围必须严格匹配字体实际支持的区间（anybody 仅支持 50–150），超出则导致轴被静默忽略。

在使用 Google Fonts 提供的变量字体（Variable Fonts）时，仅在 CSS 中设置 font-stretch 并不足以激活宽度轴（wdth）效果——必须确保 @import 或 请求中声明的轴范围与字体实际支持范围完全一致。

以 Anybody 字体为例，其官方字体测试页明确标注：
✅ 支持的 wdth 范围为 50–150（50 表示极窄/condensed，100 为常规，150 为宽/extended）
❌ 若在 CSS @import 中错误写成 wdth=50..200，Google Fonts 服务将无法加载有效的可变字体文件，最终回退为静态字体子集（即不支持 font-stretch 的普通字体），导致 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%; /* 等效于 wdth=50 → 极度压缩 */
}

? 验证技巧：打开 Anybody 字体测试页，拖动「Width」滑块观察实际可调范围，或查看 Network 面板中加载的 font.woff2 文件响应头，确认 font-face 声明是否包含 font-stretch: 50% 150%。

⚠️ 注意事项

• font-stretch 的数值单位是 百分比，但仅当字体本身支持该轴且加载 URL 显式声明对应范围时才生效；
• 不要依赖浏览器自动推断轴范围——Google Fonts 的 CSS API 要求显式声明所有使用的轴及其上下限；
• 若需同时使用宽度与字重轴（如本例），请用英文逗号分隔：wdth,50..150,wght,100..900；
• 推荐使用 方式替代 @import（性能更优），并添加 rel="preload" 提升关键字体加载优先级。

✅ 最终效果验证

应用上述修正后，

This heading should be condensed.

将真正呈现紧凑、窄向的视觉形态，而非默认常规宽度。这是变量字体“按需加载 + 精准控制”的典型实践——配置即能力，范围即权限。