Html css文件中字体的相对文件路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34581901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
relative file path to fonts in css file
提问by David Tunnell
I have a stylesheet that is referenced in the header:
我有一个在标题中引用的样式表：
<link href="./css/stylesheet.css" rel="stylesheet">
All of the css works in it except this specific code:
除此特定代码外，所有 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;
}
When I put the above @font-faceCSS in the the page above where the icons are being shown it works but when I put it in the CSS file it stops working. I finally found out that this was likely due to the file path not being correct.
当我将上面的@font-faceCSS 放在上面显示图标的页面中时，它可以工作，但是当我将它放入 CSS 文件时，它停止工作。我终于发现这可能是由于文件路径不正确。
Here is the file structure:
这是文件结构：
Looking at this article (https://css-tricks.com/quick-reminder-about-file-paths/) it looks like I should either use:
看看这篇文章（https://css-tricks.com/quick-reminder-about-file-paths/）看起来我应该使用：
url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')
to go back to the root and then into the fonts folder. But the icon still is not rendering from the CSS file.
回到根目录，然后进入字体文件夹。但是图标仍然没有从 CSS 文件中呈现。
What am I doing wrong and how do I fix it?
我做错了什么，我该如何解决？
回答by Quentin
URLs in CSS files are relative to the CSS file.
CSS 文件中的 URL 是相对于 CSS 文件的。
url('fonts/icomoon.eot?hsw0h3');means http://example.com/css/fonts/icomoon.eot?hsw0h3, but your screenshot of your directory structure shows you need http://example.com/fonts/icomoon.eot?hsw0h3.
url('fonts/icomoon.eot?hsw0h3');意味着http://example.com/css/fonts/icomoon.eot?hsw0h3，但您的目录结构屏幕截图显示您需要http://example.com/fonts/icomoon.eot?hsw0h3.
Add ../or /
添加../或/
回答by Jagan Mohan prafful
../need to be added before the path to move up one folder in hierarchy (../../path) to move two folders up in hierarchy
../需要在路径之前添加在层次结构中向上移动一个文件夹 ( ../../path) 在层次结构中向上移动两个文件夹
回答by Snazzy Sanoj
Consider describing the font sources individually without any version specification(I guess) like,
考虑在没有任何版本规范的情况下单独描述字体源（我猜），例如，
@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;
}
Alternatively, you may also remove the formatspecification and let the browser to determine automatically, if problem still persists.
或者，您也可以删除format规范并让浏览器自动确定问题是否仍然存在。
