蒙特塞拉特字体样式不工作,为什么?



我已经嵌入了所有的谷歌怪物字体样式,并把它放在我的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>

有谁知道问题所在吗?谢谢。

要调整字体的粗细,需要使用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>

最新更新