Google 字体不适用于在 Github Pages 上部署的 react 应用答案

【问题标题】：Google fonts not applied to deployed react app on Github PagesGoogle 字体不适用于在 Github Pages 上部署的 react 应用
【发布时间】：2021-10-08 08:44:00
【问题描述】：

我正在为我的应用程序使用 styled-components，并在 createGlobalStyle 中导入了一个 google 字体 url。：

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`



* {
    @import url(//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;
}

部署应用程序后，字体未应用。我尝试将@import url 从https://fonts.. 替换为http://fonts..，然后是当前//fonts..。这些是我发现的一些解决方案，它们对某些人有效，但对我无效。这里似乎有什么问题？

这里是已部署应用的链接：http://patorikkun.github.io/tip-calculator-app

【问题讨论】：

标签： reactjs github-pages styled-components google-font-api

【解决方案1】：

尝试将@import 移动到顶层，在* {} 之外

发件人：

createGlobalStyle`
* {
    @import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
    margin: 0;
    ...
}
...
}`;

收件人：

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;
}

...
}`;

来自MDN explanation：

导入的规则必须先于所有其他类型的规则，@charset 规则除外；

【讨论】：