部署到GitHub Pages的React应用使用styled-components时Google Fonts不生效

• 核心错误为@import语句放置位置不符合CSS规范：@import 必须声明在CSS样式表的最顶部，不能嵌套在任意选择器内部，浏览器会自动忽略所有未写在样式表起始位置的@import声明，这就是你调整协议格式后仍不生效的根本原因。
• 修正后的代码示例：

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
}
`

• 额外注意：GitHub Pages已全面支持HTTPS，直接使用完整HTTPS路径即可，无需使用协议相对路径，避免特殊环境下的解析异常。修改完成后重新构建部署，清空浏览器缓存后再验证效果即可。

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