Roboto 'Thin' 字体 Google

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

如果你去 CSS 中的 link 查看字体源，你可以看到 light 字体是 weight 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 字体中选择字体，单击右下角的字体名称，自定义并选中您需要的所有字体粗细框来获得 link .然后返回嵌入并复制 link。不要只使用字重 - 也导入 link 否则你会在 Ubuntu.

上的 Firefox 上遇到字体缩放和间距问题

Answer 2

thin 不是 font-weight 的有效关键字。根据Google字体（当你select"Roboto"再看"customize"字重列表）Thin对应字重100

Roboto 'Thin' 字体 Google

Roboto 'Thin' with Google Fonts

html

css

font-face

webfonts

google-font-api