css文件中字体的相对文件路径

Question

我有一个标题中引用的样式表：

除了这个特定的代码之外，所有的css都在其中工作：

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?hsw0h3');
    src:    url('fonts/icomoon.eot?hsw0h3#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?hsw0h3') format('truetype'),
        url('fonts/icomoon.woff?hsw0h3') format('woff'),
        url('fonts/icomoon.svg?hsw0h3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

当我将上面的@ font-face CSS放在上面显示图标的页面上时，它可以工作，但是当我把它放在CSS文件中时它停止工作。我终于发现这可能是由于文件路径不正确。

这是文件结构：

看看这篇文章（https://css-tricks.com/quick-reminder-about-file-paths/）看起来我应该使用：

url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')

返回根目录然后进入fonts文件夹。但是图标仍然没有从css文件渲染。

我做错了什么以及如何解决？

Answer 1

CSS文件中的网址相对于CSS文件。

url('fonts/icomoon.eot?hsw0h3');表示http://example.com/css/fonts/icomoon.eot?hsw0h3，但您的目录结构截图显示您需要http://example.com/fonts/icomoon.eot?hsw0h3。

添加../或/

Answer 2

../需要添加到在层次结构中上移一个文件夹（../../path）以便在层次结构中上移两个文件夹的路径之前

Answer 3

考虑单独描述字体来源而不使用任何版本规范（我猜），

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot');
    src: url('fonts/icomoon.eot') format('embedded-opentype');
    src: url('fonts/icomoon.ttf') format('truetype');
    src: url('fonts/icomoon.woff') format('woff');
    src: url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

或者，如果问题仍然存在，您也可以删除format规范并让浏览器自动确定。

希望这有帮助。 ：）