Poppins @import 不工作外部样式问题

Question

我正在制作一个非常简单的索引页，并试图合并一些特定的字体。我的目标是从 Google API URL @import Poppins，然后使用 * 选择器将其添加到每个元素。我的CSS如下：

@import url('https://fonts.googleapis.com/css?family=Poppins');


* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}

但是，当我这样做时，字体在默认的无衬线字体中保持完全相同。在其他一些帖子之后，(Font family "Poppins" not working properly on my Website when it loads) 我在我的 html:

中做了这个

<!DOCTYPE html>
<html>
<head>
    <title>Wavy Section SVG</title>
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: 'Poppins';transition: 
        }
    </style>
</head>
<body>
    <h2>Text</h2>
</body>
</html>

然后效果很好，让文本成为 Poppins 而不是无衬线字体。我知道这可能有点迂腐，但我不想要内部样式。为什么我的 @import 标签不起作用？感谢您的回答！

Answer 1

用正文替换 *

body {
font-family: 'Poppins';
}

Answer 2

只需检查 url。

示例：

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,100&display=swap');

Poppins @import 不工作外部样式问题

Poppins @import not working external style issue

css

import

fonts