CSS @font-face 在 ie 中不起作用

Question

我有以下 CSS 可以在 Firefox 中使用，但不能在 IE 中使用。 顯然，字體在目錄中。 有什么建議？

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
    font-family: Futura,  Verdana, Arial, sans-serif;
    font-size:1.2em;
    height: 40px;
}

Answer 1

我閱讀了很多建議 hacks 的教程，所以我想出了這個我認為更好的解決方案......它似乎工作正常。

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
}
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
}
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}

Answer 2

如果您仍然遇到此問題，這里是您的解決方案：

http://www.fontsquirrel.com/fontface/generator

它比任何其他字體生成器工作得更好/更快，並且還提供了一個示例供您使用。

Answer 3

對於 IE > 9，您可以使用以下解決方案：

@font-face {
    font-family: OpenSansRegular;
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}

Answer 4

來自http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

現在 Firefox 3.5 和 3.6、Internet Explorer、Safari、Opera 10.5 和 Chrome 支持網絡字體，網絡作者面臨新問題：這些實現有何不同？ 哪些 CSS 技術可以滿足所有需求？ Firefox 開發人員 John Daggett 最近發布了一些關於這些問題和正在探索的解決方法的綜述。 為了回應那個帖子，特別是為了回應 Paul Irish 的工作，我想出了以下 @font-face CSS 語法。 它已經在包括 IE 8、7 和 6 在內的所有上述瀏覽器中進行了測試。到目前為止，一切都很好。 以下是一個測試頁面，它將免費的 Droid 字體聲明為一個完整的字體系列，包括常規、斜體、粗體和粗斜體。 查看源代碼了解詳細信息。 警告：請注意，Readable Web 已經發布了它的第一個 @font-face 相關軟件實用程序，用於快速輕松地創建本地壓縮的 EOT 文件。 它有自己的網站，除了實用程序本身，下載包還包含有用的文檔、測試字體和 EOT 測試頁面。 它被稱為 EOTFAST 如果您正在使用 @font-face，它是必備的。

這是 Mo' Bulletproofer 代碼：

@font-face{ /* for IE */
    font-family:FishyFont;
    src:url(fishy.eot);
}
@font-face { /* for non-IE */
    font-family:FishyFont;
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype");
}

Answer 5

Font Squirrel 對我不起作用。 我上傳了一種字體以轉換為多種字體格式以支持 IE。 它執行了轉換，我可以下載。 然后我根據規格將內容上傳到我的服務器。 我只能讓 Firefox 或 IE 工作，但不能同時工作。 對我有用的解決方案是上面的 Mo Bullet Proofer 鏈接。

Answer 6

您可以使用Google Font API 。 他們說它適用於 IE 6 及更高版本。 （我沒有測試過這個。）

Google 的服務基礎設施負責將字體轉換為與任何現代瀏覽器（包括 Internet Explorer 6 及更高版本）兼容的格式，...

Answer 7

我發現字體聲明是否在媒體查詢 IE 中（邊緣和 11）不會加載它們； 它們需要是樣式表中聲明的第一件事，而不是包含在媒體查詢中

Answer 8

更改如下

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */
    src: local("Futura"), url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); /* non-IE */  
}

body nav {
     font-family: "Futura";
    font-size:1.2em;
    height: 40px;
}

Answer 9

1) 嘗試將絕對鏈接而不是相對鏈接添加到您的 eot 字體 - 不知何故，舊的 IE 只是不知道 css 文件在哪個文件夾中 2) 做 2 個額外的 @font-face 聲明，所以它應該是這樣的：

@font-face { /* for modern browsers and modern IE */
    font-family: "Futura";
    src: url("../fonts/Futura_Medium_BT.eot"); 
    src: url("../fonts/Futura_Medium_BT.eot?#iefix") format("embedded-opentype"), 
    url( "../fonts/Futura_Medium_BT.ttf" ) format("truetype"); 
}
@font-face{ /* for old IE */
  font-family: "Futura_IE"; 
  src: url(/wp-content/themes/my-theme/fonts/Futura_Medium_BT.eot);
}

@font-face{ /* for old IE */
  font-family: "Futura_IE2"; 
  src:url(/wp-content/themes/my-theme/fonts/Futura_Medium_BT.eot?#iefix) 
  format("embedded-opentype");
}

.p{ font-family: "Futura", "Futura_IE", "Futura_IE2", Arial, sans-serif;

這是 wordpress 模板的示例 - 絕對鏈接應指向起始索引文件所在的位置。