如何在CSS样式表中使用Google Fonts？Alata字体未生效求助

核心问题1：未正确引入目标字体 #

你注释标注要使用Alata字体，但实际Google Fonts的引入链接加载的是ABeeZee字体——浏览器根本没获取到Alata的字体文件，自然无法渲染该字体。

核心问题2：字体大小设置异常 #

CSS里font-size: 5%会让文字极小，几乎完全不可见，即便字体生效也无法观察到效果。

核心问题3：HTML结构错误 #

• 样式表的<link rel="stylesheet" href="style.css">放在了<header>内部，应移至<head>标签中，确保页面加载时优先读取样式规则。
• 存在未闭合的<link标签，破坏HTML结构，导致浏览器解析异常。

修复后的代码示例 #

修正后的HTML：

<!-- Font Alata -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- 替换为Alata的正确引入链接 -->
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css">
</head>
<header>
  this is a font test
  <a href="link to homepage">
    <img src="link to image" />
  </a>
</header>

修正后的CSS：

header {
  background-color: #4d4d4d;
  color: #FFFFFF;
  /* 设置合理的字体大小，示例用24px */
  font-size: 24px;
  font-family: 'Alata', sans-serif;
}

内容的提问来源于stack exchange，提问作者Kali