蒙特塞拉特字体样式不起作用，为什么？答案

【问题标题】：Montserrat font styles does not work , why?蒙特塞拉特字体样式不起作用，为什么？
【发布时间】：2021-03-03 23:43:20
【问题描述】：

我已经嵌入了所有的谷歌 Monsterrat 字体样式并将其放入我的 html 文件中，但它不起作用，我尝试过细的 e、黑色、斜体没有任何反应，最后一件事我该如何添加代码sn-p ? . 这是代码

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>

      <style>
                h1 {
                          font-family: 'Montserrat-Black';
                }

                p {
                          font-family: 'Montserrat-Thin';
                }
      </style>


      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="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,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:wght@300&display=swap"
                rel="stylesheet">

      </head>

      <body>


      <h1 style="margin-left: 500px;">
                This is my H1 Tag
      </h1>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolore obcaecati mollitia laborum tempora
                quisquam? Quae quam aliquid nesciunt laborum est saepe facere corporis, impedit amet enim, magnam
                dolores provident?
                Obcaecati, dolores laborum, quidem nemo a molestiae totam perspiciatis asperiores, deserunt
                perferendis quis ad. Explicabo molestiae culpa dolores! Architecto id maxime impedit iusto
                distinctio quasi voluptatibus blanditiis, molestiae nam asperiores!
                Mollitia facere, eaque ipsum, quia asperiores possimus esse culpa omnis consequuntur soluta adipisci
                aspernatur dolor unde natus officia atque dicta eum, et doloribus voluptatem debitis amet! Omnis
                beatae magni qui?
                Accusantium pariatur deleniti dicta reiciendis velit, eius eveniet optio at nulla dolore neque
                quaerat quae tempore non quibusdam ipsam dolorum error animi odio molestiae enim aliquid
                exercitationem officia! Enim, saepe.</p>

      </body>

      </html>

有人知道这个问题吗？感谢您的问候。

【问题讨论】：

标签： html css google-fonts

【解决方案1】：

要调整字体的粗细，您需要使用font-weight 属性：

h1 {
  font-family: 'Montserrat';
  font-weight: 900;
}

p {
  font-family: 'Montserrat';
  font-weight: 100;
}

<link href="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,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:wght@300&display=swap" rel="stylesheet">

<h1>
  This is my H1 Tag
</h1>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Et dolore obcaecati mollitia laborum tempora
  quisquam? Quae quam aliquid nesciunt laborum est saepe facere corporis, impedit amet enim, magnam
  dolores provident?
  Obcaecati, dolores laborum, quidem nemo a molestiae totam perspiciatis asperiores, deserunt
  perferendis quis ad. Explicabo molestiae culpa dolores! Architecto id maxime impedit iusto
  distinctio quasi voluptatibus blanditiis, molestiae nam asperiores!
  Mollitia facere, eaque ipsum, quia asperiores possimus esse culpa omnis consequuntur soluta adipisci
  aspernatur dolor unde natus officia atque dicta eum, et doloribus voluptatem debitis amet! Omnis
  beatae magni qui?
  Accusantium pariatur deleniti dicta reiciendis velit, eius eveniet optio at nulla dolore neque
  quaerat quae tempore non quibusdam ipsam dolorum error animi odio molestiae enim aliquid
  exercitationem officia! Enim, saepe.
</p>

【讨论】：

所以这是 font-weight 的唯一方法，在 font-family 中没有其他方法可以给它？
因为我看过一个视频，它只是在写 font-family : "montserrat-black";
@TwanaStackoverflow 这取决于字体的打包和服务方式。可以将Montserrat 之类的字体拆分为具有不同权重的不同字体，例如Montserrat-Thin 和 Montserrat-Black，但我不知道 Google Fonts 是否这样做，或者过去是否这样做。无论如何，推荐的现代方法总是使用font-weight，因为它更具语义性。
谢谢兄弟，感激❤