我第一次尝试使用可变字体，即来自 Google 字体的 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">
在谷歌字体页面上，您需要选择要导入的所有字体粗细。如果您想使用字体粗细，不仅仅是基础。