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

Question

我在最近的元素中遇到了一个奇怪的错误。它尚未发布，所以我无法分享(因为与我公司的契约(Contract)义务)，但这里有一些细节:

• 通过 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