所以我希望 intro 类具有 oswald 字体，但它不起作用，我也尝试使用 bebas 但它也不起作用，我开始相信 CSS 只允许 2 种字体，是真的吗？如果是这样，我该如何绕过这个规则？
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--poppins);
}
:root {
--bright-green: #cad18a;
--green: #939e65;
--poppins: "Poppins", sans-serif;
--gloock: "Gloock", serif;
--oswald: "Oswald", sans-serif;
}
.hero {
background-image: url(./content/pexels-markus-spiske-3039036.jpg);
height: 500px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-bottom: 7px solid var(--green);
}
.nav-parent{
background-image: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
height: 90px;
}
.nav-wrapper {
padding: 1rem 0 0 0 ;
margin:0 3rem 0 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
justify-content: space-evenly;
gap: 1rem;
}
.logo, .menu * {
text-decoration: none;
color: white;
filter: brightness(100%);
}
.logo {
font-weight: 600;
font-size: 1.6rem;
color: #cad18a;
}
.menu {
font-size: 1.1rem;
}
.menu *:hover{
text-decoration: underline var(--bright-green);
text-underline-offset: 5px;
}
.hero-child {
background: rgb(0,0,0);
background: linear-gradient(94deg, rgba(0,0,0,0.729341736694678) 0%, rgba(15,26,57,0.35959383753501406) 55%, rgba(36,64,138,0) 100%);
height: 500px;
}
.inside {
color: white;
margin:0 3rem 0 3rem;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
height: 300px;
}
.inside *{
font-family: var(--gloock);
}
.content {
margin: 1rem 3rem 0 3rem;
}
.intro {
font-size: var(--oswald);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="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=Gloock&family=Oswald:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<main class="hero">
<main class="hero-child">
<div class="nav-parent">
<div class="nav-wrapper">
<a href="/" class="logo">Frondo</a>
<div class="menu">
<a href="/" class="home">Home</a>
<a href="/blog.html" class="blog">Blog</a>
<a href="/merch.html" class="merch">Merch</a>
<a href="/about-us.html" class="about-us">About Us</a>
</div>
</div>
</div>
<div class="inside">
<p class="desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis tenetur id qui? Necessitatibus aliquid assumenda reprehenderit aliquam corporis. Eligendi voluptatum laborum numquam, dolore omnis nemo sunt ea est earum saepe!
</p>
</main>
</main>
<main class="content">
<h1 class="intro">
Get to know Castro!
</h1>
</main>
</body>
</html>我也尝试过通过CSS导入字体，但还是不行。
尝试一下
@font face {
url:
font-weight:
font-name:
}
我不知道如果我是这样写的，一旦你输入@font-face并单击输入，VS代码就会为你写它，并链接到你的字体，它应该可以工作！
您是否尝试过通过 CSS 文件添加字体？
看看这个：
@import url("https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap");
body {
font-family: "Oswald", sans-serif;
font-style: normal;
}