即使在导入后字体在 CSS 中也不会改变答案

【问题标题】：Font not changing in CSS even after importing即使在导入后字体在 CSS 中也不会改变
【发布时间】：2022-01-23 22:36:32
【问题描述】：

我为所有字体创建了一个文件夹。这是我的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。有什么理由不这样吗？我什至检查了检查选项卡，它显示了这个：

【问题讨论】：

标签： html css fonts

【解决方案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';
}

【讨论】：

我在我的 CSS 中添加了这个：``` @font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.ttf") 格式("ttf"), url("/fonts/Poppins-ExtraLightItalic.ttf") 格式("ttf"); } ```
但它仍然没有改变:(
查看链接文档，Truetype 字体的格式名称是truetype，而不是ttf

【解决方案2】：

尝试使用这个 css：

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

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

【讨论】：

我在我的 CSS 中添加了这个：@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-SemiBold.ttf") 格式("真类型"), url("/fonts/Poppins-ExtraLightItalic.ttf") 格式("真类型");仍然，它没有改变:(
是truetype 不是true type