知道为什么上述问题不起作用吗?我启用了 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,重置我的计算机,但没有任何改变。
不是完整的答案,但请检查目录中是否有与 css 文件相关的字体,即:
@font-face {
font-family: futura-bold;
src: url("./assets/fonts/Futura-bold.ttf");
}