第一次访问网站时不会加载@ font-face,必须刷新/重新加载

时间:2012-08-13 07:09:34

标签: html css fonts refresh font-face

我使用http://www.fontsquirrel.com/fontface/generator套件生成器和css代码正确配置了CSS文件,将字体文件上传到正确的目录中。

字体在我的网站上工作完全正常,即使在页面之间切换时第一次进入刷新后,这只是第一次在进入网站时不显示字体直到刷新页面,两者都发生Firefox和Chrome。

我的CSS文件顶部的css代码:

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:url(images/bg.png) repeat; }
html { padding:0; margin:0; }
a { text-decoration:none; border: none; outline:none; }
a:hover { text-decoration:underline; }
a img {border: none; }

@font-face{ font-family: 'handfont-webfont'; src: url('text/handfont-webfont.eot'); src: url('text/handfont-webfont.eot?#iefix') format('embedded-opentype'), url('text/handfont-webfont.woff') format('woff'), url('text/handfont-webfont.ttf') format('truetype'), url('text/handfont-webfont.svg#webfont') format('svg'); }

以下是我页面中段落使用的字体代码:

.body p { font-family:handfont-webfont; font-size: 12px; padding:5px 5px; margin:0; }

我试着寻找答案,但找不到答案,非常感谢任何帮助人员。

2 个答案:

答案 0 :(得分:5)

您是否尝试将@ font-face置于CSS之前的其他任何位置。

CSS中存在错误:

.body p { font-family:handfont-webfont;}//there are no single quotes

将其更改为:

.body p { font-family:'handfont-webfont';}//with single quotes

答案 1 :(得分:1)

尝试改变 -

 font-family:'handfont-webfont' 

font:'handfont-webfont'

in .body p