如何使用 css 指定在 googlefonts 中使用的字体

Question

我已经在我的网站 Montserrat Extra-light 200 和 Montserrat Medium 500 中导入了两种字体，但是当我输入

字体系列：'Montserrat Extra-light 200'，无衬线；

它适用于 Montserrat Medium 500 字体，但我想应用 Montserrat Extra-light 200 但我还有另一篇大喊使用 Montserrat Medium 500 的文字，所以我无法删除一种字体

那么有什么方法可以在特定文本中使用蒙特塞拉特

这是我的 html 和 css 代码

#section1_text1 {
  font-family: "Montserrat", sans-serif;
}

#section1_text2 {
  font-family: "Montserrat", sans-serif;
}

<!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">
    <link rel="stylesheet" href="/test/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="section1">
            <h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
            <h2 id="section1_text2">Agile Way Of Development</h2>
        </div>
    </main>
</body>

</html>

所以我想指定在特定文本中使用哪种字体

Answer 1

您的 HTML 和 CSS 是正确的。您只需添加 font-weight 以确保您可以为所选字体使用特定的字体粗细。

styles.css

#section1_text1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
}

#section1_text2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

HTML

<!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">
    <link rel="stylesheet" href="/test/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="section1">
            <h3 id="section1_text1">Almost before we knew it, we had left the ground.</h3>
            <h2 id="section1_text2">Agile Way Of Development</h2>
        </div>
    </main>
</body>

</html>

如何使用 css 指定在 googlefonts 中使用的字体

how to specify which font to use in googlefonts with css

html

css

fonts

specifications