我正在学习如何使用可变的谷歌字体，并写了这个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%;
}字体'任何人'支持宽度轴（https://fonts.google.com/knowledge/using_type/styling_type_on_the_web_with_variable_fonts），那么为什么文本不压缩？
JSFiddle上的演示：https://jsfiddle.net/yr4h8wg1/
2条答案
按热度按时间o2g1uqev1#
在
@importURL中，您指定了50..200的宽度范围。但似乎“任何人”字体仅支持50..150的宽度范围-请参见https://fonts.google.com/specimen/Anybody/tester。在JSFiddle演示中，将“200”更改为“150”即可正常工作。idfiyjo82#
提供900的字体粗细和50%的字体拉伸：
https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50,900&display=swap