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

Question

我已经嵌入了所有 google monsterrat 字体样式并将其放入我的 html 文件中，但是它不起作用，我已经尝试了 e 上的细字体，黑色字体，斜体字体什么都没发生，最后一件事我如何添加代码片段？ . 这是代码

<!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>

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

Answer 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>

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

Montserrat font styles does not work , why?

html

css

google-fonts