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

我阅读了很多建议黑客的教程，所以我想出了这个我认为更好的解决方案......它似乎工作正常。

@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

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

Google 的服务基础架构需要 注意将字体转换为 与任何现代兼容的格式 浏览器（包括 Internet Explorer 6 及以上），...

Answer 6

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

Answer 7

我发现如果字体声明位于媒体查询 IE（edge 和 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 模板的示例 - 绝对链接应指向您的起始索引文件所在的位置。