Google可变字体Anybody无法应用CSS缩紧效果问题求助

我正在学习使用Google可变字体，编写了如下HTML代码：

<h1>This heading should be condensed.</h1>

对应的CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..200,100..700&display=swap');

h1 {
  font-family: 'Anybody';
  font-weight: 900;
  font-stretch: 50%;
}

已知Anybody字体支持宽度轴，但文本并未呈现缩紧效果，请问原因是什么？

原因及解决办法 #

• 字体权重超出加载范围：你设置了font-weight: 900，但@import链接里指定的权重范围是100..700。浏览器找不到对应权重的Anybody字体，会自动回退到系统默认字体，缩紧效果自然失效。
• font-stretch适配问题：虽然font-stretch能控制字体宽度，但对于可变字体，直接用font-variation-settings控制wdth轴的兼容性和可靠性更好。

修正后的CSS代码 #

/* 先扩展权重范围到900，确保对应字体被加载 */
@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..200,100..900&display=swap');

h1 {
  font-family: 'Anybody';
  font-weight: 900; /* 现在这个权重在加载范围内了 */
  /* 直接控制宽度轴，缩紧效果生效 */
  font-variation-settings: 'wdth' 50;
  /* 也可以继续用font-stretch，只要字体加载正确就会生效 */
  /* font-stretch: 50%; */
}

内容的提问来源于stack exchange，提问作者Real Noob