使用两种不同粗细的 Google Roboto 字体

Question

所以基本上你可以使用

<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">

导入 Roboto 字体，但请注意

Roboto:900

部分。我可以在同一个网页上同时导入

Roboto:900

和

Roboto:300

吗？我尝试只使用

Roboto

然后在 css 中设置

font-weight

，但它不起作用。

想法？谢谢

旁注：

Roboto:900

为粗体风格，

Roboto:300

为细体风格。

Answer 1

这应该有效

<link href='https://fonts.googleapis.com/css?family=Roboto:300,900' rel='stylesheet' type='text/css'>

CSS

.light{
 font-weight:300;
}
.bold{
 font-weight:900;
}

Answer 2

这应该有效：

<link href='https://fonts.googleapis.com/css?family=Roboto:300,900' rel='stylesheet' type='text/css'>

当您在 Google Fonts 中点击“使用”时，您可以通过勾选复选框来选择任意数量的字体粗细。导入的越多，网站的速度就会越慢，但 2 个字体粗细应该没问题。

Answer 3

转到 Google Fonts 中的 Roboto 字体。

点击您想要的字体粗细旁边的“选择[字体粗细] +”，网站将为您构建所需的链接。

示例：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">