css - @font-face 没有得到正确的字体

Question

我在使用 CSS 中的 @font-face 标签来使用自定义字体时遇到了问题。我有一个名为 Project 的文件夹，里面有文件夹 fonts、css 和 images。我正在尝试使用 @font-face 来使用自定义字体。

这是我的代码:

HTML - index.html

<div id="hello">Hello</div>

CSS - css/typography.css

@font-face{
font-family: 'ranger';
src: url('fonts/Ranger.ttf');
}

#hello{
font-family: 'ranger';
font-size: 70px;
color: white;
text-align: center;
padding-top: 30px;
white-space: nowrap;
}

我将它用于多种其他字体，除了其他两种字体外，它们都可以使用。代码或字体文件类型没有差异。对于其中一种字体，它使用的是常规字体而不是我指定的字体。另一个只是使用浏览器默认值。这两种字体今天早上一直在工作，直到我将所有 CSS 移到它们自己的文件夹中，并将所有字体移到它们自己的文件夹中。

求助!我对 CSS/HTML 很陌生，所以我真的一点都不明白。

Answer 1

你的路径是错误的。由于您的 CSS 文件位于 /css/ 中，因此您必须上一级目录才能访问 /fonts/。

@font-face{
    font-family: 'ranger';
    src: url('../fonts/Ranger.ttf');
}