有人可以帮助我,我不知道为什么我在我的网站上使用的字体与我引用的字体不同



嗨,我想有一个类似的字体作为这个网站,但我检查了网站,并不能复制在我正在创建的网站中使用的字体。

网站:https://zyro.com/preview/niko

字体预览。下面是我的代码:

body {
font-family: "Times New Roman", serif;
}
.intro {
font-family: "Cormorant Garamond", serif;
font-size: 54px;
}
.emphasise {
font-style: italic;
font-weight: 800;
font-family: "Cormorant Garamond light", serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<title>Jonathan Ngien</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!--Toggler/Collapsible button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#targetnavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!--Navbar links-->
<div class="collapse navbar-collapse justify-content-center" id="targetnavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/jon.html">HOME</a></li>
<li class="nav-item"><a class="nav-link" href="/education.html">EDUCATION</a></li>
<li class="nav-item"><a class="nav-link" href="/aboutme.html">ABOUT ME</a></li>
<li class="nav-item"><a class="nav-link" href="/contact.html">CONTACT</a></li>
</ul>
</div>
</nav>
<main class="container">
<h1 class="display-3">
<span class="intro">
HI, MY NAME IS
<span class="emphasise">Jonathan.</span>
I'M CURRENTLY A STUDENT IN THE
<span class="emphasise">National University of Singapore.</span>
</span>
</h1>
</main>
</body>
</html>

在我检查了页面后,所有我设法找到的是字体Cormorant Garamond,但在将该表单添加到我的CSS文件后,我得到的字体比网站上的字体更粗,如我网站的字体所示。我可以看出新字体被应用了,但是它比我引用的那个字体粗得多。

所以,我试着用font-weight来改变表单的厚度,但是它没有改变。

有人能告诉我,如果我做错了什么,或者有另一种方法使字体更薄?

所以看起来你需要从谷歌字体添加这个字体到你的html标题。

你可以从这里获得字体:https://fonts.google.com/specimen/Cormorant+Garamond

下面是一个使用字体粗细为300的工作示例,就像你提供的网站:

body {
font-family: "Times New Roman", serif;
}
.intro {
font-family: "Cormorant Garamond", serif;
font-size: 54px;
}
.emphasise {
font-style: italic;
font-weight: 700;
font-family: "Cormorant Garamond", serif;
}
<head>
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>

<span class="intro">
HI, MY NAME IS
<span class="emphasise">Jonathan.</span>
I'M CURRENTLY A STUDENT IN THE
<span class="emphasise">National University of Singapore.</span>
</span>

最新更新