如何在 CSS 中使用特定的字体样式，来自 Google 字体（即瘦、超轻……）答案

【问题标题】：How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)如何在 CSS 中使用特定的字体样式，来自 Google 字体（即瘦、超轻……）
【发布时间】：2017-07-20 19:50:14
【问题描述】：

像Montserrat 这样的Google 提供的字体有很多不同的样式：薄、超轻、轻、常规等......

我找不到使用 CSS 指定样式的方法。使用 Font-weight 只能访问其中的一部分，如 CodePen

所示

<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' 
rel='stylesheet' type='text/css'>

<p class="w100">This is 100 weight</p>

body {
 padding: 0 20px;
 font-family: 'Montserrat';
 font-size:40px;
}

.w100 {
 font-weight: 100;
}

我想使用 Extra-Light 样式，但常规是我得到的最轻的样式。

有没有直接的解决方案？

更新：这是一个浏览器问题。我的 Chrome 有字体问题。我发布的代码运行良好。

【问题讨论】：

第一行显示hin 而不是thin。但无论如何你都可以删除它 - 100 就足够了。而100也是最轻的。如果这对你不起作用，我猜你需要寻找不同的字体。
修正错别字，结果相同。
查看 Google 字体页面的来源，他们对每个重量都使用 @font-face 定义，我想避免这种情况，因为我必须链接到特定的字体文件。这些链接可能会在未来发生重大变化时发生变化。

标签： html css fonts google-webfonts

【解决方案1】：

从您的 index.html 中的 google 字体导入字体链接后。创建一个 global.css 文件，其中包含不同字体粗细的 Montserrat 字体系列的 css 代码。

我在我的 react 项目中使用了这个字体。

从谷歌字体导入或链接字体。我的是这样的

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      </style>

浏览css文件以使用字体系列中的每个变体对您非常有用。

   .thin {
        /* Montserrat Thin = 100 */
        font-weight: 100;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    .extralight {
        /* Montserrat Extra Light = 200 */
        font-weight: 200;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .light {
        /* Montserrat Light = 300 */
        font-weight: 300;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .regular {
        /* Montserrat Regular = 400 */
        font-weight: 400;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .medium {
        /* Montserrat Medium = 500 */
        font-weight: 500;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .semibold {
        /* Montserrat Semi-bold = 600 */
        font-weight: 600;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .bold {
        /* Montserrat Bold = 700 */
        font-weight: 700;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .extrabold {
        /* Montserrat Extra Bold = 800 */
        font-weight: 800;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .black {
        /* Montserrat Black = 900 */
        font-weight: 900;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }

【讨论】：

【解决方案2】：

Google 字体页面实际上会告诉您如何操作，并包含一个重量选择实用程序。如果你想要最细的样式，这就是 Montserrat （不同的字体有不同的可用权重）：

HTML：

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

与你的比较，它有多余的权重和两个错误（href='// 而不是 href="https:// 和 hin 而不是 thin）

CSS：

font-family: 'Montserrat', sans-serif;
font-weight: 100;

如果您想要额外的权重，请像这样添加它们：

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300" rel="stylesheet">

请记住，您只想指定实际要使用的那些，因为它们需要下载，因此会增加页面的加载时间。

这是 Montserrat 的一个工作示例。如果100 对你来说不够瘦，那你就倒霉了。

* {
  font-family: 'Montserrat', sans-serif;
}
.w100 {
  font-weight: 100;
}
.w200 {
  font-weight: 200;
}
.w300 {
  font-weight: 300;
}
.w400 {
  font-weight: 400;
}

<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
  </head>
  <body>
    <p class="w100">This is 100 weight</p>
    <p class="w200">This is 200 weight</p>
    <p class="w300">This is 300 weight</p>
    <p class="w400">This is 400 weight</p>
  </body>
</html>

【讨论】：

当然，假设额外的权重是可用的。
我修正了错别字，但结果是一样的。您可以将我的 CodePen 示例或您的代码与 Google 字体页面进行比较，您会看到不同之处。
@is_this_taken 实际上，它看起来很好/对我来说是一样的：imgur.com/a/0xCME也许是您的浏览器有问题？
哇，谢谢，这似乎是浏览器的问题。 Chrome 出现问题。在 Firefox 中它运行良好。