@ font-face適用於IE8但不適用於IE9

Question

如上所述，雖然在IE8及以下的所有其他瀏覽器中顯示良好，但我在IE9中沒有顯示@ font-face的問題。 此外，在我的計算機上本地查看時，IE9會顯示字體，而不是在完全顯示時。

該網站是：

bigwavedesign.co.uk/gcc/gcc/

使用的代碼是：

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

有人想知道為什么會這樣嗎？

干杯!

=============================================

編輯

我發現以下網站在IE9中顯示相同的字體確定，任何想法他是怎么做到的？

http://iamthomasbishop.com/

Answer 1

沒有答案，只是確認：我有類似的問題。 Font可以在除IE9之外的所有其他IE版本中使用，它們都使用IETester和原始瀏覽器。 更改文檔模式（F12開發工具）時，字體有效。 不過我不喜歡它。

更新 ：通過一些技巧我設法讓它工作。 好像IE9正在使用.woff版本的字體（我已經排除了）比我認為的那樣.eot 。 我使用fontsquirrel的@ font-face生成器來獲取所有不同的字體變體，並使用smileyface -local將它們包含在我的項目中。 沒有必要改變我的.htaccess文件。 現在工作正常，在所有IE版本中看起來都一樣：

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

---

（ 我甚至瘋狂地使用Mark“Tarquin”Wilton-Jones的文字陰影黑客，將IE瀏覽器世界的其他版本應用於IE版本。舊學校？看起來很棒！值得嗎？嗯，學到了很多東西。 ;）

Answer 2

我在IIS7網站上托管的Web Fonts遇到了同樣的問題，正如Grillz所建議的那樣 ，問題歸結為MIME類型。

我根據WOFF問題的Mime類型的答案選擇使用“application / octet-stream”。

1. 打開IIS並選擇托管字體的站點（IE9和Firefox必須是相同的域名）
2. 雙擊“Mime類型”
3. 點擊右上角的“添加...”。
4. 在“文件擴展名：”中輸入“.woff”
5. 在“MIME類型：”中輸入“application / octet-stream”

希望將來可以節省10分鍾。

Answer 3

對我們來說，訣竅就是改變我們正在服務的.eot文件的格式。

適用於IE6-9，Firefox 3-4，Chrome，Safari，Android，iPhone。

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}

變為：

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}

Answer 4

我的解決方案是聲明兩種不同的字體：

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

然后：

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}

Answer 5

阿巴羅爾+1

我的解決方案

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
} 

在IE 7-9，chrome，opera，firefox工作。

IE 9需要第一行，IE 7-8需要第二行。

Answer 6

好了，因為你已經編輯了你的帖子，下面的文字將不是答案。 你指向正確的目錄嗎？ 這可能是服務器的mime類型問題嗎？

================================================== ==

這可能是這樣的：

重要的是要注意您的站點必須在documentMode 9中呈現，以便利用IE9中包含的新功能（包括IE9中的所有新功能，而不僅僅是與Web字體相關的功能）。 如果您之前沒有聽說過documentMode，那么Microsoft已經整理了一份指南 ， 該指南解釋了它是什么以及如何在您的網站上使用它。

來自http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

Answer 7

在IE9 - F12中查看調試屏幕，看看是否有任何CSS3117錯誤。 另請參閱： IE9阻止跨源Web字體的下載

Answer 8

Font Squirrel還提供了一個很棒的生成器工具，可以幫助您創建一個字體工具包，其中包括所需的格式，已編寫的CSS，甚至是一個演示頁面，以查看它是如何使用的，以及您可能遇到的問題的幫助。

將輸出結合到我的網站中是一件輕而易舉的事，它確實完美地解決了問題。

Answer 9

http://www.fontsquirrel.com使用它作為它的示例CSS，它對我正在進行的項目工作正常。

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

Answer 10

我有這個問題。 事實證明我在font-family聲明中缺少逗號。

Answer 11

我想在這個場景中添加另一個可能出錯的東西。 IE9有一條規則，丟棄在第一次加載后無法緩存的所有@ font-face聲明。 IE9實際上會在第一個顯示器上正確使用字體，但在后續刷新時，@ font-face將被禁用。 我偶然關閉瀏覽器后發現了這個，然后重新打開它，發現我的字體神秘地工作，只是為了稍后停止工作。

要解決此問題，您需要確保為您的字體提供服務的請求具有除非no-cache之外的Cache-Control響應頭。 我建議將其設置為max-age=3600 。 這將確保您的字體緩存一小時。 IE9然后將能夠一致地顯示您的字體。

Answer 12

你應該查看這篇博文，Paul Irish對你遇到的問題有一些說法，他想出了他所謂的'防彈'@ font-face語句。

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/