【问题标题】：IE Font-face issues & solutions we tried我们尝试过的 IE 字体问题和解决方案
【发布时间】：2012-12-31 04:36:00
【问题描述】：

我知道这是一个常见问题，我尝试了几乎所有我能找到的解决方案，我想知道显示一点代码是否会更有用。

问题

我正在尝试为客户实现 4 种字体。当前文件是使用 font-squirrel 生成的。但是，这些字体在 IE 7/8 上根本不工作，在 IE9 上部分工作。

字体本身的跨浏览器渲染不是这里的问题，我只是想让它显示出来。

我们的尝试

我们（在我工作的公司）花了很多时间做以下事情：
- 我们发现了多种语法，其中 font-squirrel 的语法更完整。
- 在页面加载几秒钟后，在 JavaScript 中重新加载 CSS（适用于旧项目）。
- 检查所有语法问题。
- 检查是否有 404 错误
- 使用相同的名称，但字体粗细不同
- 尝试添加 ?#iefix 和使用的具体格式

截图

示例代码

您可以在以下位置看到它：http://dev.phin.fr/fontsie/

语法

@font-face {
            font-family: 'DidotBoldItalic';
            src: url('fonts/DidotHTF-24BoldItalic.eot');
            src: url('fonts/DidotHTF-24BoldItalic.ttf') format('truetype'), url('fonts/DidotHTF-24BoldItalic.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

谢谢！

【问题讨论】：

标签： internet-explorer fonts cross-browser font-face webfonts

【解决方案1】：

请到这里：http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

IE 6、7 和 8 将无法运行。每个浏览器对字体的渲染之间的不一致是一个众所周知的问题。在我看来——根据你的屏幕截图——现代浏览器的发展也值得期待。所有基于 webkit 的浏览器（safari、chrome 和 opera）在渲染上都应该比 firefox 或 9 更接近。

【讨论】：

谢谢！渲染不是问题（它是，但现在并不重要）。 font-face 适用于这些版本的 IE 上的其他字体。

【解决方案2】：

我冒昧地从您的示例中下载了所有文件和代码。

我注意到您的 CSS 声明中缺少 «local('☺')» 属性，请查看以下示例的第三行：

@font-face {
    font-family: 'SofiaProBold';
    src: url('Sofia-Pro-Bold.eot');
    src: local('☺'), url('Sofia-Pro-Bold.ttf') format('truetype'), url('Sofia-Pro-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

您可以在http://imageftw.com/uploads/20130116/font-fix.png http://imageftw.com/uploads/20130116/font-fix.png查看 IE8 (PC) 中的结果

这个小技巧解决了 Sofia 字体的问题，但不幸的是，它不适用于 Didot 字体。我可以假设该字体最初不是网络字体或具有版权，而 fontsquirrel 无法对其进行转换。

以下只是我的个人意见。

使用字体时，请尝试将所有 @font-face 声明放在包含所有字体文件的同一目录中的 CSS 文件中，然后将此类 CSS 文件链接到文档的 <head>。

例子：

/fonts/myfont/myfont.css « add to the document's <head>
/fonts/myfont/myfont.woff
/fonts/myfont/myfont.eot
/fonts/myfont/myfont.ttf
/fonts/myfont/myfont.svg

这不仅可以更容易地找到应用的@font-face，还可以避免在url('myfont/font.ttf') 属性中使用相对/绝对路径。

【讨论】：

完美！它适用于 IE7 和 IE8。由于某种原因（可能是许可/损坏问题）仍然无法在 IE9 中呈现，但我使用了另一种字体！谢谢！