2

我有一个使用 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 ...）

我已经没有选择了，希望有人可以在这个问题上帮助我。

4

1 回答 1

0

SOULUTION:

I found out that the problem wasnt in my CSS file at all.

It turns out that in my index.php file the fonts that I am using in my webpage is coming from an googleapis.com site, like so: 

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

and in this "CSS" file, the font URL isn't encapsulated in: ' ' <-- these. And that seems to be a big problem for Google Chrome's webbrowser.

I took the content of the googleapis.com generated CSS file, put it in my own CSS file and encapsulated the URL. Now it works fine!

于 2013-05-07T23:53:23.077 回答