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

我阅读了很多暗示黑客的教程，所以我想出了这个解决方案，我觉得更好......看起来工作正常。

@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＆gt; 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支持Web字体   资源管理器，Safari，Opera 10.5和Chrome，网络作者面临新的挑战   问题：这些实现有何不同？什么CSS技术   会容纳所有？ Firefox开发人员John Daggett最近发布了一篇文章   关于这些问题以及正在发生的变通方法的小整理   探讨。作为对该职位的回应，特别是   Paul Irish的工作，我提出了以下@ font-face CSS语法。   它已经在所有上述浏览器中进行了测试，包括IE 8,7，   到目前为止，这么好。以下是一个声明的测试页面   免费Droid字体作为一个完整的字体系列与Regular，Italic，Bold，   和Bold Italic。查看源代码了解详情。提醒：请注意   Readable Web发布了它的第一个@ font-face相关软件   用于快速轻松地创建本机压缩的EOT文件的实用程序。   它有自己的网站，除了实用程序本身，它还有   下载包包含有用的文档，测试字体和   EOT测试页面。这叫做EOTFAST如果你正在使用@ font-face，   这是必须的。

这是Mo'防弹代码：

@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

您可以使用Google Font API。他们说它适用于IE 6及更高版本。（我没试过这个。）

Google的服务基础架构需要关心将字体转换为格式兼容任何现代浏览器（包括Internet Explorer 6 并且......），

Answer 6

Font Squirrel对我不起作用。我上传了一种用于转换为多种字体格式的字体以供IE支持。它执行了onversion，我可以下载。然后我根据规格将内容上传到我的服务器。我只能让Firefox或IE工作，但不能同时工作。对我有用的解决方案是上面的Mo Bullet Proofer链接。

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模板的示例-绝对链接应指向您的起始索引文件所在的位置。

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

9 个答案: