@ font-face在Chrome中有效，但在IE或Firefox中不起作用

Question

這讓我很困惑。 我正在使用字體松鼠來下載Web工具包以顯示自定義字體。 這是字體的鏈接： http : //www.fontsquirrel.com/fontfacedemo/League-Gothic

如果您現在查看主頁： http : //www.simonsayswebsites.com/

中間的主要文字為“旨在為您帶來更多客戶的定制網站”。 它在chrome中看起來很棒，與應有的樣子完全一樣，但是如果您在Firefox或IE中查看它，則自定義字體無效。

這是生成字體的CSS：

@font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;

}

有人有想法么？ 我已經准備好了很多案例，但是我沒有看到與我的案例相關的案例，因為我認為我已經為每個瀏覽器包含了所有不同的必需文件，並將它們上傳到了受人尊敬的地方。

Answer 1

隨便看看，我發現了Firefox的一個有趣的花絮：

同源規則：默認情況下，Firefox僅接受相對鏈接。 如果要使用絕對鏈接或包含來自不同域的字體，則需要使用訪問控制標頭發送這些字體。

\n

嘗試將這些字體URL更改為相對字體，看看是否有幫助：

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

編輯：看到科爾佩拉的答案； 問題是來自“ www”子域的不匹配。 不過，您可能應該保持URL相對。

Answer 2

問題的原因是（曾經）跨域使用字體。 以“ http://simonsayswebsites.com”開頭的URL被視為與“ http://www.simonsayswebsites.com”不同的域，即使兩個域名可能引用同一台計算機。

切換到相對URL很有幫助，因為那時域是相同的。 但是，盡管有傳言相反，Firefox並不拒絕@font-face絕對URL。 我已經建立了一個簡單的演示來展示這一點。

據推測，謠言來自以下情況：如果切換到相對URL有幫助，自然就可以假設URL類型是問題所在。

Answer 3

我也遇到了您的問題，進行了很多搜索，但沒有發現任何問題……所以我開始在CSS上進行了幾分鍾的實驗，最后意識到我重復了字體系列名稱，在兩個主題中都聲明了以下代碼和布局頁面：

<style type="text/css" media="screen, print">
    @font-face 
    {
        font-family: 'foo';
        src: url('~/Assets/fonts/foo.woff') format('woff'),
        url('~/Assets/fonts/foo.ttf') format('truetype'),
        url('~/Assets/fonts/foo.eot') format('eot');
    }
</style>

我只需要刪除其中之一，我的代碼就可以在所有三種瀏覽器中正常工作！

還有一點是，只需刪除包含“ font-family：'foo';”的行。 零件就能解決問題！