需要帮助在 CSS 中显示自定义字体

问题描述 投票:0回答:1

知道为什么上述问题不起作用吗?我启用了 Live Server,从 dafont 下载了“Daniel”和“Comfortaa”字体以用于此项目,但两者都没有显示在我的浏览器中(Chrome - 我也尝试过 Brave,相同的结果)。

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Test</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>hello</h1>
  <p>Paragraph asdfsadf</p>
</body>
</html>

还有我的CSS:

@font-face {
font-family: 'daniel';
src: url(daniel.ttf);
};

@font-face {
font-family: 'comfortaaBold';
src: url(Comfortaa-Bold.ttf);
};

h1 {
font-family: 'daniel';
};

p {
font-family: 'comfortaaBold';
};

所以基本上字体没有显示在我的浏览器中,我不明白为什么。奇怪的是,当我注释掉我的 @font-face 指令时,只显示 daniel 字体(我不明白——这不需要激活 font-family 指令才能工作吗?),并且舒适的则不然。对这里发生的事情有什么想法吗?谢谢!

我尝试切换浏览器,甚至完全退出 VS code,重置我的计算机,但没有任何改变。

html css fonts webfonts
1个回答
0
投票

不是完整的答案,但请检查目录中是否有与 css 文件相关的字体,即:

 @font-face {
  font-family: futura-bold;
  src: url("./assets/fonts/Futura-bold.ttf");
}
© www.soinside.com 2019 - 2024. All rights reserved.