为什么赢得我的字体加载？

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使网络字体适用于所有浏览器。

Chalkduster

@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 那解决了我的字体加载问题。