为什么我的字体不会加载？

Question

我在CSS中设置了以下font-face：

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

菜单设置如下：

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'dtdt_menu';
}

这根本不起作用。但是当我将font-face更改为以下内容时：

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

这应该工作，但Pacifico.ttf字体位于相同的文件夹，并具有chmod 755就像Chalkduster.ttf。为什么Chalkduster.ttf不会加载？我不明白，因为它具有与其他自定义字体完全相同的权限。

Answer 1

font-family值必须相同。您还需要找出CSS font-family的实际字体名称，大部分时间它与字体文件名相同，但它也可能是其他内容。阅读更多关于MDN的信息，并使用Web Font Generator使网络字体适用于所有浏览器。

粉笔除尘器

@font-face {
    font-family: 'Chalkduster';
    src: url('../fonts/Chalkduster.ttf');
}
.menu ul {
    font-family: 'Chalkduster';
}

和平的

@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico.ttf');
}
.menu ul {
    font-family: 'Pacifico';
}

Answer 2

我的问题是路径问题。在我的本地计算机上工作，我在Fonts文件夹前输入../，所以路径为：../ Fields / font-name.ttf这解决了我的字体加载问题。