Sass中使用@font-face导入Google Font失效，求问题排查

你的问题核心在于**@font-face的src路径错误**：你写的fonts.google.com/specimen/Space+Grotesk是Google Font的字体展示网页地址，不是实际的字体文件（如woff2、ttf）路径，浏览器无法从这个地址加载字体资源，所以字体无法生效。

另外你的SCSS代码里body的样式块没有闭合（缺少}），这也可能导致样式解析异常，记得补上闭合标签。

下面是两种正确的实现方式：

方式一：使用Google Font官方生成的@font-face代码 #

Google Fonts会为每个字体提供现成的@font-face代码，你可以直接复制使用，确保路径指向正确的字体文件：

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXskPMBBSSJLm2E.woff2) format('woff2');
}

* {
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Space Grotesk';
} /* 补上闭合标签 */

方式二：直接在HTML中引入Google Font的link标签（更简便） #

这种方式不需要自己编写@font-face，直接在HTML的<head>中添加链接，就能直接在SCSS中使用字体：

<head>
  <!-- 引入Space Grotesk 500字重 -->
  <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=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
</head>

对应的SCSS代码：

* {
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Space Grotesk', sans-serif; /* 添加sans-serif作为后备字体 */
}

内容的提问来源于stack exchange，提问作者Alana Rêyes