css - @font-face 随机停止工作，直到大量刷新

Question

我从 font squirrel 生成了 webfont 工具包。工作完美。我调换了字体的顺序，将 svg 字体移到顺序的顶部，以便它们在 chrome 中具有别名。

它们通常可以完美加载，而且一切看起来都很棒。但有时，我会加载页面，但字体没有填充，并且全部粘在一起。这是我在这种情况下的菜单图片:

http://i.imgur.com/Agd6dvz.png

通常它看起来不像那样。

我检查了 chrome 开发者控制台，看看发生了什么，我看到了这个:

GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.svg 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.svg 404 (Not Found) coveralls-overalls-c-21.html:1
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.woff 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.woff 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.ttf 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.ttf 404 (Not Found) coveralls-overalls-c-21.html:1

链接到的目录是正确的。

如果我多次刷新页面，最终一切都会恢复正常。

这是我的字体 CSS:

    @charset utf-8;

@font-face {
    font-family: 'allerbold';
    src: url('fonts/typetogether_adelle-bold-webfont.eot');
    src: url('fonts/typetogether_adelle-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/typetogether_adelle-bold-webfont.svg#allerbold') format('svg'),
         url('fonts/typetogether_adelle-bold-webfont.woff') format('woff'),
         url('fonts/typetogether_adelle-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


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

    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'allerbold';
    src: url('fonts/aller_bd-webfont.eot');
    src: url('fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/aller_bd-webfont.svg#allerbold') format('svg'),
         url('fonts/aller_bd-webfont.woff') format('woff'),
         url('fonts/aller_bd-webfont.ttf') format('truetype');       
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'allerbold_italic';
    src: url('fonts/aller_bdit-webfont.eot');
    src: url('fonts/aller_bdit-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/aller_bdit-webfont.svg#allerbold_italic') format('svg'),
         url('fonts/aller_bdit-webfont.woff') format('woff'),
         url('fonts/aller_bdit-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'alleritalic';
    src: url('fonts/aller_it-webfont.eot');
    src: url('fonts/aller_it-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/aller_it-webfont.svg#alleritalic') format('svg'),
         url('fonts/aller_it-webfont.woff') format('woff'),
         url('fonts/aller_it-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'allerregular';
    src: url('fonts/aller_rg-webfont.eot');
    src: url('fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/aller_rg-webfont.svg#allerregular') format('svg'),
         url('fonts/aller_rg-webfont.woff') format('woff'),
         url('fonts/aller_rg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

我还应该说，正如您在图像中看到的那样，字体实际上正在显示。受影响的只是填充/边距等。

当我刷新页面并且字体正常显示时，错误从控制台消失了。

Answer 1

您的 facebook 插件似乎有问题，它可能会阻止您网站上的其他脚本运行。尝试禁用 Facebook 插件并查看错误是否消失。