Google 字体未应用于 Github 页面上已部署的 React 应用程序

Question

我正在为我的应用程序使用样式组件，并且我在 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..。这些是我发现的一些解决方案，它们对某些人有效，但对我无效。这似乎是什么问题？

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

Answer 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：

Imported rules must precede all other types of rules, except @charset rules;