我没有广泛地研究该错误的确切触发器，但基本上是这样的情况：使用网络字体的页面将内容加载到< iframe>使得框架也使用网络字体被浏览器“污染”。用网络字体呈现的先前OK文本突然转移到可怕的Arial或其他东西，一种是自己。有时候它会反弹，只是随机的用户交互，如鼠标移动降级。
那个博客有一个例子。为了澄清，这是包含的页面被弄乱了，而不是< iframe> (至少，在我的经验，到目前为止)。
有任何人找到一个比该博客中建议的更好的解决方法，这是强制CSS重新加载< link>元素从@ font-face声明来了？ (我可以这样做，但它会是一个小的痛苦，加上它会迫使我移动我的文档< head>的字体设置，如果我记得是一个性能问题;我将不得不在周围找到再次tidbit。)
编辑 – 更新
OK here’s a test page.这是主(容器)页面：
<!DOCTYPE html>
<html>
<head>
<style id='font_style'>
@font-face {
font-family: 'bold-display';
src: url('DejaVuSans-Bold.eot');
}
</style>
<style>
.fancy { font-family: bold-display,"franklin gothic medium","verdana",sans-serif; font-size: 32px; }
iframe { width: 500px; height: 200px; }
#floater {
position: absolute;
top: 100px; left: 100px;
display: none;
}
#floater.showing {
display: block;
}
</style>
<script>
function load() {
var frame = document.createElement('iframe'),floater = document.getElementById('floater'),target = document.getElementById('target');
frame.src = 'frame.html';
target.appendChild(frame);
floater.className += 'showing';
}
function unload() {
var floater = document.getElementById('floater'),target = document.getElementById('target');
target.innerHTML = '';
floater.className = floater.className.replace(/\bshowing\b/g,'');
}
</script>
</head>
<body>
<div class='fancy'>Hello World</div>
<button type='button' onclick='load()'>Click Me</button>
<div id='floater'>
<div id='target'></div>
<button type='button' onclick='unload()'>Close</button>
</body>
</html>
框架页面具有相同的@ font-face和一条虚假消息。
问题似乎与使用加载的字体有一个以上的替代字体的列表有关。我(没有好的理由)在我的“font-family”值中折腾了几个类似的更常见的字体。当我把他们回到：
.title { font-family: bold-display,sans-serif; }
那么问题消失了(或者至少它似乎已经走了)。
感谢那些已经帮助过的人。到@albert，添加一个答案总结你试过，我会upvote你:-)
解决方法
在删除< iframe>元素，只需执行以下操作：
var sheets = document.styleSheets;
for(var s = 0,slen = sheets.length; s < slen; s++) {
sheets[s].disabled = true;
sheets[s].disabled = false;
}
重新加载是我真正想到的工作，因为它似乎是从< iframe>的垃圾收集中删除它。设置一个test page，显然只适用于IE 8。
注意：我最初无法使用Google网络字体重现这个问题，并且不得不专门下载一个.eot字体以供使用。所以你的工作可能首先使用WOFF字体，并且只加载EOT如果必要。
不完全确定如果这是你正在寻找，但如果不是，请澄清，我将根据需要编辑。
更新1：原因
所以，我已经缩小了问题的原因。我只能重现如果发生以下情况(这是一个讨厌的一个人)。
>< iframe>包含在父元素中
>父元素的类已更改
>该类不会更改要应用的元素的显示(或者，如果它不更改< iframe>元素上的整体显示)
而且，从我可以告诉，是的，它必须是类名。我无法重现给一个元素的id相同的步骤。认真。这是一个讨厌的。我会继续挖一点。
更新2：次要原因
如果< iframe>在绘制时不是完全在浏览器窗口中，它将不会加载< iframe>窗口，并将卸载主窗口的字体，每当它必须重绘页面(最显着的是当它调整大小)。这是一个粗糙的bug。
更新3：什么应该是一个解决方案
而不是使用display：none，将元素的高度和宽度设置为0px和overflow：hidden ;,您将获得与display none相同的效果，但不会将其从DOM中删除，从而不要重绘页面和采取你的字体。我从前的test page已经更新，所以你可以看到对以前的bug的影响。
