[英]relative file path to fonts in css file
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-face CSS in the page above where the icons are being shown it works but when I put it in the CSS file it stops working.当我将上面的@font-face CSS 放在上面显示图标的页面中时,它可以工作,但是当我将它放在 CSS 文件中时,它停止工作。 I finally found out that this was likely due to the file path not being correct.
我终于发现这可能是由于文件路径不正确。
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?我做错了什么,我该如何解决?
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
.表示
http://example.com/css/fonts/icomoon.eot?hsw0h3
,但您的目录结构截图显示您需要http://example.com/fonts/icomoon.eot?hsw0h3
。
Add ../
or /
添加
../
或/
../
需要在路径之前添加以在层次结构中向上移动一个文件夹( ../../path
)以在层次结构中向上移动两个文件夹
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 format
specification and let the browser to determine automatically, if problem still persists.或者,您也可以删除
format
规范并让浏览器自动确定,如果问题仍然存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.