@ font-face在Chrome中可用，但不適用於IE或Firefox

這對我來說很困惑。我正在使用字體松鼠下載Web工具包以顯示自定義字體。這裏是鏈接到字體：http://www.fontsquirrel.com/fontfacedemo/League-Gothic @ font-face在Chrome中可用，但不適用於IE或Firefox

如果你在網頁看現在：http://www.simonsayswebsites.com/

正文中間寫着「定製網站，旨在幫助您獲得更多的客戶。」它看起來很棒，完全按照它的樣子，但是如果你用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;

}

人有什麼想法？我看了很多關於這方面的案例，但我沒有看到與我的案例有關的案例，因爲我認爲我已經爲每個瀏覽器包含了所有不同的必要文件，並將它們上傳到了他們尊敬的地方。

來源

2012-12-23 king

我在Firefox中看到「LeagueGothicRegular」。 –

[這可能會幫助你]（http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/）。 –

問題是網址顯示的方式......你不能擁有絕對的網址，無論出於何種原因哈哈。但是謝謝Shekh的那個鏈接，它爲我今後必須做的事提供了一個很好的背景。感謝Arash的建議，謝天謝地我現在都很好。 – king

我戳周圍發現了這個有趣的珍聞爲Firefox：

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

~~試着將這些字體的網址相對的，看看是否有幫助：~~

@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; 
}

編輯：見Korpela的答案;問題是來自'www'子域的不匹配。不過，您應該保持相對的網址。

來源

2012-12-23 22:13:08 VisibleMan

大聲笑...真棒我的傢伙......它工作了！瘋狂......非常感謝在這方面的幫助......不能相信它就是這麼簡單。 – king

問題的原因是（跨）使用跨域的字體。即使這兩個域名可能指向同一臺計算機，啓動「http://simonsayswebsites.com」的URL也被視爲與「http://www.simonsayswebsites.com」不在同一個域中。

切換到相對URL有幫助，因爲那麼域是相同的。但是儘管傳言相反，Firefox不會拒絕@font-face中的絕對URL。我已經設置了一個簡單的demo來展示這一點。

據推測，謠言起源於這樣的情況：如果切換到相對URL有幫助，那麼很自然地認爲URL的類型是問題。

來源

2012-12-23 22:58:39

好啊，我完全錯過了他沒有在他的字體定義中使用「www」。 – VisibleMan

是有道理的...我欣賞徹底的解釋。 :) – king

我也有你的問題，並搜索了很多關於它，但沒有提出什麼... 所以我開始嘗試我的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';」部分將做的伎倆！

來源

2015-11-08 08:24:41 AmiNadimi

@ font-face在Chrome中可用，但不適用於IE或Firefox

回答

相關問題