CSS 中的字体即使在导入后也没有改变

Question

我为所有字体创建了一个文件夹。这是我的 html 代码：

<!DOCTYPE html>
<html>
<head>
    <title>Play with bulb!</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js"></script>
</head>
<body>

   <img id="myImage" onclick="changeImage()" src="images/lightOff.gif">

   <h1 id="myText" onclick="changeText()"></h1>

</body>
</html>

还有我的CSS：

@import url("./fonts/Poppins-ExtraBold.ttf");

#myText {
    font-size: 30px;
    font-family: 'Poppins';
}

我也有一个 javascript 文件，但我没有给出它，因为它与这个问题无关。

出于某种原因，它没有显示 Poppins。有什么理由不是吗？我什至检查了检查选项卡，它显示了这个：

Answer 1

@import 用于导入 CSS，而不是字体文件。

您需要 @font-face 来加载自定义字体。

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

然后你可以用你定义的名字来使用它：

#myText {
    font-family: 'Open Sans';
}

Answer 2

试试这个 css:

@font-face {
   font-family: 'Poppins' ;
   src: url('./fonts/Poppins-ExtraBold.ttf') format('truetype');
}

#myText {
    font-size: 30px;
    font-family: 'Poppins';
}

CSS 中的字体即使在导入后也没有改变

Font not changing in CSS even after importing

html

css

fonts