我第一次尝试使用可变字体，即谷歌字体中的Quicksand。这是它给你的标签。。。
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
它在页面上肯定使用了流沙，但问题是，当我将字体从400改为500时，它不会改变。300也没什么作用，但如果我把它改成550以上的值，它似乎会变得非常大胆。就好像我把它设置为只下载两种不同的重量，一种非常轻的重量和一种非常粗的重量。
我环顾四周，发现一篇文章说要这样做：
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@100..900&display=swap" rel="stylesheet">
但这似乎并没有改变什么。我是不是错过了什么？
我发现了问题。我指定的权重范围超出了此字体的可用范围。而不是这样做：
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@200..900" />
我应该用300..700
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700" />
此外，在更改导入时，我并不总是进行适当的刷新，因为我已经习惯了React的热重新加载，但很明显，如果你更改头部的字体链接，那么你必须使用F5。
您没有正确导入字体。这里用这个代替：
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
在谷歌字体页面上，您需要选择所有要导入的字体权重。如果您想使用字体权重，则不仅仅是基数。