我有以下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;
}
我阅读了很多建议使用hack的教程，所以我想出了这个解决方案，我认为它更好... 看起来它运行得很好。
@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;
}
对于IE > 9，您可以使用以下解决方案：
@font-face {
font-family: OpenSansRegular;
src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot');
}
来自http://readableweb.com/mo-bulletproofer-font-face-css-syntax/
现在，Firefox 3.5和3.6、Internet Explorer、Safari、Opera 10.5和Chrome已经支持Web字体，网页作者面临新的问题：这些实现有什么区别？哪些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");
}
Font Squirrel对我来说不起作用。 我上传了一个字体进行转换，以支持IE的多种字体格式。 它执行了转换，我能够下载。 然后按规格将内容上传到我的服务器。 我只能使Firefox或IE中的一个工作，但不能同时使用。 对我有用的解决方案是上面的Mo Bullet Proofer链接。
谷歌的服务基础设施将把字体转换成与任何现代浏览器(包括Internet Explorer 6及以上版本)兼容的格式...
我发现如果字体声明在媒体查询内部，IE（包括Edge和11）将无法加载它们；它们需要是样式表中声明的第一件事，并且不包含在媒体查询中。
按照以下更改
@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;
}
1）尝试使用绝对链接而不是相对链接来引用您的eot字体 - 旧版IE无法确定css文件在哪个文件夹中。 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;