为什么我的字体无法加载？

Question

我在 CSS 中设置了以下字体：

@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-family: 'dtdt_menu';
    src: url('../fonts/Pacifico.ttf');
}

这可以正常工作，但是 Pacifico.ttf 字体与 Chalkduster.ttf 位于同一文件夹中并且具有 chmod 755。为什么 Chalkduster.ttf 无法加载？我不明白它，因为它与其他可用的自定义字体具有完全相同的权利。

Answer 1

font-family 值必须相同。您还需要找出 CSS font-family 的实际字体名称，大多数时候它与字体文件名称相同，但也可以是其他名称。阅读有关 MDN, and use the 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 文件夹前输入 ../ 所以路径是： ../Fonts/font-name.ttf 这解决了我的字体加载问题。

Why won't my font load?