我有一个在标题中引用的样式表:
<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;
}
当我把上面的@字体脸上面显示图标的页面中的 CSS 可以正常工作,但是当我将其放入 CSS 文件中时,它就停止工作了。最后我发现这可能是由于文件路径不正确造成的。
这是文件结构:
看这篇文章(https://css-tricks.com/quick-reminder-about-file-paths/ https://css-tricks.com/quick-reminder-about-file-paths/)看来我应该使用:
url('/fonts/icomoon.ttf?hsw0h3')
url('../fonts/icomoon.ttf?hsw0h3')
返回根目录,然后进入字体文件夹。但图标仍然没有从 CSS 文件渲染。
我做错了什么以及如何解决它?
CSS 文件中的 URL 是相对于 CSS 文件.
url('fonts/icomoon.eot?hsw0h3');
means http://example.com/css/fonts/icomoon.eot?hsw0h3
,但是你的目录结构的屏幕截图显示你需要http://example.com/fonts/icomoon.eot?hsw0h3
.
Add ../
or /
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)