@font-face不显示

Question

我有一个自定义的本地字体，我正在尝试加载，但它就是不显示。我已经检查了关于这个主题的所有堆栈交换帖子，但提供的解决方案似乎都不起作用。

我尝试过绝对路径、相对路径、清除缓存和其他方法，比如使用不同的名称。

但是它不会显示:(

在这里查看我当前的设置：

HTML：

<link rel="stylesheet" href="css/boilerplate/fonts.css">
<link rel="stylesheet" href="css/index.css">

<div id="grid_item_2" class="text_center">
    <h1>Bienvenido<br>a Some app</h1>
    <h3>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium nostrum accusamus, unde excepturi placeat sapiente explicabo rerum iusto? Mollitia commodi vitae veniam quasi.</h3>
</div>

CSS：

字体css：

@font-face {
    font-family: Lilita;
    src: url(../../Data/Frontend/Fonts/LilitaOne.ttf) format('ttf');
}

索引css：

#grid_item_2 h1 {
    font-family: Lilita;
    -webkit-text-stroke: 1px #000;
    text-shadow: 0px 0px 2px #4C4C4C;
    line-height: 25px;
    color: rgb(255, 180, 17);
    padding: 20px 0 0 0;
}

下面是所有相关文件的文件结构：

css的路径：

​

字体的路径：

​

如果有任何信息丢失或需要，请让我知道！

我非常渴望自动取款机

Answer 1

尝试用引号(‘’或“")括起字体路径，并将文本格式从ttf改为truetype。字体URL最好使用小写。

@font-face {
font-family: 'Lilita';
src: url('../../data/frontend/fonts/lilitaone.ttf') format('truetype');
}