如何将 Google Fonts 合并到 CSS 样式表中？

Question

我几周前开始学习 CSS，并尝试使用我在 Google Fonts 上找到的字体。即使我问了几个朋友之后，我也不确定我的代码出了什么问题。 （注意：我尝试了 Chrome 和 Edge，但都不起作用）以下是包含字体并引用 CSS 表的 HTML 部分：

header {
  background-color: #4d4d4d;
  color: #FFFFFF;
  font-size: 5%;
  font-family: 'Alata', sans-serif;
}

<!-- Font Alata https://fonts.google.com/specimen/Alata -->

<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=ABeeZee&display=swap" rel="stylesheet"/>

</head>
<header>
  <link rel="stylesheet" href="style.css">
  this is a font test
  <link
  <a href="link to homepage">

    <img src="link to image" />
  </a>
</header>

我很高兴知道这里出了什么问题。提前致谢！

我尝试使用 CSS 表使用 Google 字体，但该字体无法呈现

Answer 1

您正在请求字体 ABeeZee，但您在 CSS 中定义了 Atlanta。如果您想使用该字体，这些值必须匹配

header {
  font-family: 'ABeeZee', sans-serif;
}

  
  this is a font test