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

Question

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

 <link href="./css/stylesheet.css" rel="stylesheet">

除此特定代码外，所有 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')

回到根目录，然后进入字体文件夹。但该图标仍未从 CSS 文件呈现。

我做错了什么，我该如何解决？

原文由 David Tunnell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 文件中的 URL 是 _相对于 CSS 文件的_。

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

添加 ../ 或 /

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

../ 需要在路径前加一个文件夹向上移动（ ../../path ）将两个文件夹向上移动

原文由 Jagan Mohan Prafful 发布，翻译遵循 CC BY-SA 4.0 许可协议