ie8在首頁加載時沒有渲染/加載@ font-face字體

所有其他瀏覽器（FF，Chrome，Safari，Opera和IE9）都能正常工作。ie8在首頁加載時沒有渲染/加載@ font-face字體

但在IE8中，它不會加載@ font-face字體 - 但如果您導航到另一個頁面然後返回，字體呈現/加載正常。

見圖片：

enter image description here

熱門：文本所看到一旦你導航到另一個頁面，下圖：所看到的網站時首先加載

CSS代碼：

@font-face { 
    font-family: 'FontNameHere'; 
    src: url('/font/webfont.eot'); 
    src: local('?'), url('/font/webfont.woff') format('woff'), 
    url('/font/webfont.ttf') format('truetype'), 
    url('/font/webfont.svg#webfontkKNhbsUZ') format('svg'); 

}

提前致謝。

來源

2012-11-12 Juan

歡迎來到SO，Juan。我們通常不會在此處簽署帖子（請參閱meta：http://meta.stackexchange.com/questions/5029/are-taglines-signatures-disallowed或常見問題解答：http://stackoverflow.com/faq）。而且我添加了你鏈接的圖像，所以它更清晰一些。 – JcFx

看看這個問題，可能會幫助你http://stackoverflow.com/questions/3082835/css-font-face-not-working-in-ie –

就像頭一起，字體不會呈現在Android上瀏覽器2.2 - 4，因爲它不支持'local（）'。請參閱：http://stackoverflow.com/questions/3200069/css-fonts-on-android/4520467#4520467 – Patrick

Internet Explorer 9+，Firefox，Chrome，Safari和Opera支持WOFF（Web Open Font Format）字體。

Firefox，Chrome，Safari和Opera支持TTF（True Type字體）和OTF（OpenType字體）類型的字體。

Chrome，Safari和Opera也支持SVG字體/形狀。

Internet Explorer還支持EOT（嵌入式OpenType）字體。

注意：Internet Explorer 8及更早版本不支持@ font-face規則。

然而， IE8與網絡字體的關係比「它不支持它」要複雜一點。它實際上支持他們，但以某種方式使他們感到痛苦。

有五種類型的Web字體格式：

嵌入式OpenType（EOT） TrueType字體（TTF）的OpenType（OTF）可縮放矢量圖形（SVG）的Web開放字體格式（WOFF）中一堆，WOFF將成爲標準。它受Chrome，Firefox（自3.6），Opera，Safari和IE9支持。

當然，IE8對WOFF一無所知，而是完全支持EOT（公平地說，這主要是因爲IE8在WOFF之前）。這意味着要使用可在IE8和其他瀏覽器中顯示的Web字體，您必須提供EOT和WOFF格式。

更糟糕的是，IE8有一個錯誤，它會阻止它爲相同字體加載多個格式。幸運的是，你可以使用黑客。

不管怎樣，下面是@字體面

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

跨瀏覽器的CSS在這個例子中，我使用了一個叫做Open SAN和它的多種格式（EOT，WOFF，TTF和SVG字體）存儲在我的網站上的「字體」文件夾中。

如果你想知道爲什麼我包含SVG格式，答案是因爲移動Safari（iPhone/iPad）只支持這種格式，直到4.1版本。

來源

2013-09-20 06:08:10 Sudharsun

我知道這是一個老問題，但它出現相當高的谷歌搜索，所以我覺得有可能是添加這裏的答案一定的價值...

我還沒有來了明確的答案，但我無法找到你所描述的同樣症狀的其他人。

一般來說，在IE8中，webfonts可以工作，也可以不工作 - 但是我不讓它們在某些頁面加載時加載（通常並不總是第一次），並且偶爾看到它們不會在頁面之間加載我正在處理的網站。

我使用一個單獨的開發服務器，這個問題只出現在那裏，而不是生產！

我還沒有想出爲什麼會出現這種情況。我的第一個直覺是EOT字體的MIME類型，所以我在我的開發服務器上添加了一個。這並沒有解決它。我沒有時間去完全診斷，而且由於生產更重要，而且我很忙，所以我可能無法進一步挖掘 - 但也許有人會看到這在谷歌的頂部結果，它將成爲他們找出問題的催化劑......

來源

2014-06-02 15:50:09 honestbleeps

ie8在首頁加載時沒有渲染/加載@ font-face字體

回答

相關問題