我正在为我的应用程序使用样式组件，并且我在 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从网址https://fonts..到http://fonts..，然后现在//fonts..。这些是我发现的一些解决方案，对某些人有效，但对我无效。这里似乎有什么问题？
这是已部署应用程序的链接： http://patorikkun.github.io/tip-calculator-app
尝试将@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 解释：
导入的规则必须在所有其他类型的规则之前，@charset 规则除外；
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句