来自 Google 字体的可变字体不会改变粗细

Question

我第一次尝试使用可变字体，即 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">

但这似乎没有任何改变。我错过了什么吗？

Answer 1

您没有正确导入字体。这里改用这个：

<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">

在 google 字体页面上，您需要 select 所有要导入的字体粗细。如果你想使用字体粗细，不仅仅是基础。

Answer 2

我发现了问题。我指定的权重范围超出了该字体的可用范围。而不是这样做：

<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。