我有一个标题中引用的样式表:
除了这个特定的代码,所有的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文件中呈现。
我做错了什么,我该如何解决?
CSS文件中的URL与CSS文件相关。
url('fonts/icomoon.eot?hsw0h3');
表示http://example.com/css/fonts/icomoon.eot?hsw0h3
,但您的目录结构截图显示您需要http://example.com/fonts/icomoon.eot?hsw0h3
。
添加../
或/
需要在路径之前添加../
以在层次结构中向上移动一个文件夹(../../path
)以在层次结构中向上移动两个文件夹
考虑单独描述字体源而没有任何版本规范(我猜),比如
@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
规范,并让浏览器自动确定,如果问题仍然存在。
希望这有帮助。 :)