这篇博客文章（页面有点烦人）（顺便说一下，那不是我的博客）描述了我昨天在仅限于Internet Explorer 8中遇到的一个奇怪的bug。该bug涉及.EOT web字体和<iframe>元素。
我还没有深入研究这个bug的确切触发条件，但基本上是这样的：一个网页使用一个web字体，将内容加载到一个<iframe>中，以便框架也使用Web字体，浏览器会使网页呈现为"失真"状态 。之前正常显示的文本突然变成了看起来很糟糕的Arial或其他东西，似乎是自动出现的。有时它会反弹回去，只有在随机用户交互（例如鼠标移动）时才会再次降级。
那篇博客文章有一个例子。需要澄清的是，被破坏的是包含页面，而不是<iframe>中的页面（至少在我的经验中是这样的）。
有人找到比博客中建议的更好的解决方法吗？博客中建议的是强制从@font-face声明的CSS <link>元素重新加载。 （我可以这样做，但这会稍微有些麻烦，并且它会强制我将字体设置移出文档的<head>，如果我记得正确，这会影响性能；我将不得不四处搜寻并找到那个小提示。）
编辑 — 更新
好的，这里是一个测试页面。这是主要（容器）页面：
<!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，总结一下你尝试过的内容并回答，我会给你点赞 :-)
@font-face）的页面的iframe。我可以尝试制作一个示例，但这很棘手，因为这个错误就是一个错误。（如果您看到它，那么毫无疑问，这是一个浏览器错误。） - Pointy