第一次访问网站时不会加载@ font-face，必须刷新/重新加载 [英] @font-face won't load when visiting the site for the first time, must refresh/reload

问题描述

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

即使在页面切换时，第一次进入刷新后，字体在我的网站上仍能正常工作，这只是第一次当字体不显示时进入网站，直到你刷新页面，发生在Firefox和Chrome。

CSS文件顶部的css代码：

  @charsetutf-8; 
 body {margin：0;填充：0;宽度：100％;背景：url（images / bg.png）重复; } 
 html {padding：0;余量：0; } 
 a {text-decoration：none; border：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'）格式（'woff'），url（'text / （'truetype'），url（'text / handfont-webfont.svg＃webfont'）格式（'svg'）; } 
  

以下是用于页面中段落的字体代码：

.body p {font-family：handfont-webfont; font-size：12px; padding：5px 5px;余量：0; }


我试着寻找一个答案，但找不到一个，真的很感谢任何帮助家伙。

解决方案

$是不是已经尝试将@ font-face放在顶部，放在CSS的任何其他位置之前。 b
$ b

您的CSS中有一个错误：

  .body p {font-family： / b $ p 
 
 
将其更改为：
 $ / $ p 
 
 
 b 
 $ b 
  .body p {font-family：'handfont-webfont';} //带单引号
  
 
I've properly configured the CSS file using the http://www.fontsquirrel.com/fontface/generator kit generator and css codes, uploaded the font files in the right directory. 

The fonts work perfectly fine on my website after refreshing once entered for the first time even while switching between pages, it's just that first time that the fonts don't show when entering the website until you refresh the page, happens in both Firefox and Chrome. 

css code in the top of my CSS file:
@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'); }
Here's the code of the font used for the paragraphs in my pages:
.body p { font-family:handfont-webfont; font-size: 12px; padding:5px 5px; margin:0; }
I tried looking for an answer but couldn't find one, would really appreciate any help guys.
解决方案
Have you tried to put the @font-face on top, before anything else in your CSS.

There is an error in your CSS:
.body p { font-family:handfont-webfont;}//there are no single quotes
Change it to:
.body p { font-family:'handfont-webfont';}//with single quotes


                        
这篇关于第一次访问网站时不会加载@ font-face，必须刷新/重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！