0

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

但这似乎并没有改变任何东西。我错过了什么吗?

4

2 回答 2

1

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

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

于 2020-12-07T21:18:56.713 回答
-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">

在谷歌字体页面上,您需要选择要导入的所有字体粗细。如果您想使用字体粗细,不仅仅是基础。

于 2020-12-07T18:02:11.360 回答