IE 浏览器（IE6、7、8）是否支持@font-face？答案

【问题标题】：Do IE browsers (IE6, 7, 8) support @font-face?IE 浏览器（IE6、7、8）是否支持@font-face？
【发布时间】：2014-11-20 21:10:42
【问题描述】：

根据这篇文章，http://www.standardista.com/css3/font-face-browser-support IE 支持@font-face，但我找不到任何具有适用于 IE 的有效自定义字体的网站

另外，如果 IE 从早期 (IE6) 就通过 @font-face 支持自定义字体，那么为什么人们仍然使用 cufon？

有什么说明或例子吗？

【问题讨论】：

标签： css font-face

【解决方案1】：

在@font-face 在 CSS3 中正式化之前，旧版本的 Internet Explorer 支持 Embedded OpenType (EOT) 文件。您可以在 FontSquirrel 或 Google's Font API 等网站上找到兼容的文件。 FontSquirrel 的转换工具在这里也应该有所帮助。同样值得一读的是the latest bulletproof syntax recommended by fontspring 为多个浏览器嵌入多个文件。

直到最近才经常使用它的事实是双重的；首先，使用@font-face 字体存在法律问题——具体来说是版权。与仅保留字体形状的 cufon 不同，@font-face 您正在传输实际字体本身，这具有法律意义。

另一个问题是其他浏览器的支持 - Firefox 3 是现代浏览器中最后一个在某种程度上不支持@font-face，所以在 Firefox 3.5 于 2009 年年中发布之前，@font-face 仍然不可行。除了浏览器之间的格式支持存在差异之外，该技术的发展也很缓慢。

【讨论】：

我认为使用 oet 对 Web 开发人员来说不会是一个大问题？那么为什么人们仍然使用cufon，因为它比@font-face 慢，而且你将无法在网页上进行复制/粘贴。再次感谢
并非所有字体许可证都允许使用 @font-face 进行在线嵌入，但允许使用 Cufon。随着越来越多的人转移到@font-face，这只是时间问题，现在字体正在以包括 EOT 和 WOF 在内的特殊 Web 许可证出售（受 IE9、FF、Chrome、WebKit 支持 - 还没有在 Safari 中，但它即将推出......已经在 OS X 10.7 预览版中运行）
老版本的IE之所以支持@font-face，是因为它原本在CSS2.0规范中，但从CSS2.1中去掉了。就像一个兴趣点。
@editor：您丢失了指向最新防弹语法fontspring.com/blog/fixing-ie9-font-face-problems的链接

【解决方案2】：

Internet Explorer 9 需要 EOT 类型的字体。 TTF 字体可用于大多数其他最近的浏览器版本和用于 iPhone 和 iPad 等设备的 SVG。你可以在这里阅读更多关于@font-face 浏览器支持的信息http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Font Squirrel 也是一个很好的资源，可用于从现有字体文件创建 Web 字体文件，包括 EOT。请确保您拥有在网络上使用字体的许可证。您可以在此处访问免费的网络字体文件生成器： http://www.fontsquirrel.com/fontface/generator

@font-face 集的典型 CSS 条目如下所示：

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

然后您可以通过使用 css 分配“font-family”属性来调用您的字体

.my-class { font-family: "custom-font" }

【讨论】：

【解决方案3】：

你也可以写：

@font-face {
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.eot');
}
@font-face { 
    font-weight: normal;
    font-style: normal;
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.woff') format('woff'),
         url('/some/directory/custom-font.ttf') format('truetype'),
         url('/some/directory/custom-font.svg#webfont') format('svg');
}

与上面的示例一样有效，但不使用“？”标记。

【讨论】：

【解决方案4】：

是的，他们从 IE6* 开始。一个工作的example。

但字体必须遵循一些特殊规则，例如字体名称必须以系列名称开头，并且 CSS 中的系列名称必须与字体的系列名称匹配。

如果您使用字体松鼠webfont generator 从.ttf 生成.eot，它将确保生成的.eot 在IE6 上可用。

* 注意在 IE6/7/8 中有 aliasing issues 带有自定义字体渲染。

【讨论】：