CSS @import字体导入异常：如何将导入移至<head>标签？

问题场景 #

以下CSS代码原本可正常渲染指定字体：

*, *::before, *::after {
    margin: 0;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Unbounded:wght@400;500;600&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: 'Unbounded', cursive;
}

但执行任一操作后字体无法渲染：

• 将@import移至CSS文件顶部
• 将字体导入代码移至HTML的<head>标签内
• 删除*, *::before, *::after样式重置块

需求是将字体导入移至HTML的<head>标签中，寻求可行修复方案。

推荐修复方法 #

1. 改用<link>标签替代@import导入字体 #

在HTML的<head>中直接使用<link>标签引入字体样式表，这是更优的实现方式（加载性能更好、兼容性更稳定）：

<head>
  <!-- 引入字体样式表 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Unbounded:wght@400;500;600&display=swap">
  <!-- 自定义样式 -->
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Unbounded', cursive;
    }
  </style>
</head>

2. 排查字体导入链路有效性 #

如果改用<link>仍失效，需检查：

• 字体CDN链接是否可正常访问（部分字体可能存在地域限制或版本下线）
• 字体名称、权重是否与导入链接中的参数完全匹配（比如Unbounded的拼写、wght参数是否覆盖了使用的权重）

问题更新 #

更换其他字体后，字体渲染恢复正常，说明原问题大概率是目标字体的CDN导入链路存在异常（如链接失效、字体资源无法加载）导致的。

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