谷歌浏览器不会在首次访问时显示字体(css3,html5)。 (仅限刷新时)

时间:2013-05-07 15:53:08

标签: html5 google-chrome css3 font-face

我有一个使用CSS3的网站

    @font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.07.eot');
    src: url('LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
    url('LigatureSymbols-2.07.svg#LigatureSymbols') format('svg'),
         url('LigatureSymbols-2.07.woff') format('woff'),
         url('LigatureSymbols-2.07.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
        font-family: 'LigatureSymbols';
        src: url('LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
        font-weight: normal;
        font-style: normal;
}

我的代码中指定的字体不会在我第一次访问该网站时显示(仅限Google Chrome),即使我按下链接转到另一个页面,也不会正确更新字体。仅当我按F5键更新站点时,它才会呈现正确的字体。尝试了很多不同的修复,可能会对这个问题产生影响而没有运气(这就是为什么我有2个@ font-face ...)

我已经没有选择,希望有人可以帮助我解决这个问题。

1 个答案:

答案 0 :(得分:0)

SOULUTION:

我发现问题根本不在我的CSS文件中。

事实证明,在我的index.php文件中,我在网页中使用的字体来自googleapis.com网站,如下所示:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />

并在此“CSS”文件中,字体URL未封装在:''&lt; - 这些中。这似乎是谷歌Chrome浏览器的一个大问题。

我获取了googleapis.com生成的CSS文件的内容,将其放入我自己的CSS文件中并封装了URL。现在它工作正常!