Facebook字体加载然后在IE7-8中消失

Question

我在最近的项目中遇到了一个奇怪的错误。它还没有发布，所以我不能分享（因为与我公司的合同义务），但这里有一些细节：

• 通过 iFrame 的 Facebook 页面
• 问题似乎仅限于 IE7-8
• 使用自定义@font-face 字体
• 无法在 VirtualBox 上重现问题
• 在同一浏览器中从 Facebook 打开页面时，问题未重现（Facebook 促成了该问题）

问题是当页面最初在 IE7-8 中加载时字体加载正常，当用户转到内部页面时，所有@font-face 字体都恢复为它们的网络安全字体备份。它们将保持这种状态（甚至返回加载字体的第一页），直到缓存被清除。字体在 Chrome 和 Foxy 的同一台测试机器上加载并保持加载。

我在这里发现了这个错误，Facebook JS affecting CSS/@font-face in IE?，但它建议使用 iFrame 版本应该可以解决问题，我们正在使用 iFrame 版本。

有人有什么想法吗？

Answer 1

这是 IE8(?) 错误。您需要在页面加载后重新加载 CSS 样式表。

将 ID 添加到您的链接元素：

<link rel="stylesheet" href="css/style.css" id="css-element" />

然后（使用 jQuery）：

$(document).ready(function() {
    $('#css-element')[0].href=$('#css-element')[0].href;
});

...或使用 Modernizr 功能（不在每个浏览器中重新加载）：

$(document).ready(function() {
    if ($('html.lte-ie9').length > 0)
    {
        $('#css-element')[0].href=$('#css-element')[0].href;
    };
});

编辑：另见：IE8 web font iframe bug workarounds