使用谷歌字体的Roboto“瘦”

Question

所以我试着通过Google字体让Roboto Thin在我的CSS中工作

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:bold&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:thin&display=swap" rel="stylesheet">

我可以让普通的Roboto正常工作，但当我尝试像这样指定瘦体重时就不行了：

body {
    font: 16px/21px Roboto, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

h1, h2, h3, h4, h5, h6 {
    font-weight: thin;
}

它只是给了我正常的体重。有没有人看到我做错了什么？

Answer 1

thin不是font-weight的有效关键字。根据谷歌字体(选择"Roboto“，然后查看"customize”权重列表)，Thin对应的权重为100

Answer 2

如果你通过转到CSS中的链接来查看字体源，你可以看到字体的粗细是100，所以你可以这样做：

​

body{
    font-family: 'Roboto', sans-serif;
}

.normal{
  font-weight: 400;
}

.light{
  font-weight: 100;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet"> 
<!-- 100 is light, 400 is normal -->

<p class="normal">Lorem ipsum</p>
<p class="light">Lorem ipsum</p>

​

你可以通过在Google Fonts中选择字体，点击右下角的字体名称，转到customize并选中所有你需要的字体权重框来获得链接。然后返回到embed并复制链接。不要只使用粗细--也要导入链接，否则你会在Ubuntu上的Firefox上遇到字体缩放和间距问题。