【发布时间】：2011-12-07 18:09:16
【问题描述】：
This blog post（那里的页面有点烦人）（顺便说一下，这不是我的博客）描述了我昨天在 Internet Explorer 8 中遇到的一个奇怪的错误。该错误涉及 .EOT 网络字体和<iframe> 元素。
我还没有广泛研究该错误的确切触发因素，但基本上是这样的情况，即使用网络字体的页面将内容加载到 <iframe> 使得框架也使用网页字体被浏览器“污损”。使用 Web 字体呈现的之前正常的文本突然变成了看起来很糟糕的 Arial 或其他东西，有点像它自己。有时它会翻转回来，只是在随机用户交互（如鼠标移动）时再次降级。
那篇博文有一个例子。澄清一下，是包含页面搞砸了，而不是 <iframe> 中的页面（至少，到目前为止，我的经验是这样）。
有没有人找到比该博客中建议的更好的解决方法，即强制“重新加载” CSS <link> 元素，@font-face 声明来自何处？ （我可以这样做，但会有点痛苦，而且它会迫使我将我的字体设置从我的文档中移出<head>，如果我记得这是一个性能问题；我将不得不四处寻找并找到再次花絮。）
编辑 — 更新
好的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 和一个虚拟消息。
问题似乎与 使用 加载的字体和一个以上替代字体的列表有关。我（无缘无故）在我的“字体系列”值中加入了几个类似的更常见的字体。当我把它们放回：
.title { font-family: bold-display, sans-serif; }
然后问题就消失了（或者至少到目前为止它似乎已经消失了）。
感谢那些提供帮助的人。对于@albert，添加一个总结你尝试过的答案，我会支持你:-)
【问题讨论】：
-
你的代码在哪里？您使用的代码与该帖子完全相同吗？
-
嗯，它是一个 iframe，它加载一个与父页面有相似 CSS 的页面，包括
@font-face的东西。我可以尝试制作一个示例，但这很棘手，因为这个错误是一个错误。 （毫无疑问，这是一个浏览器错误；如果您看到它，那是完全显而易见的。） -
我无法复制它。 iframe 具有 xhtml 过渡文档类型，帖子具有 html5，帖子说您需要相同的文档类型...帖子样式文本是小屋，iframe 中的@font-face 引用 saxMonoRegular 等，等等，等等。帮助，只是根本看不到它
-
好的，我看看能不能做个测试。应该不会太难。
-
嗯……你说得对；看起来这比我想象的要多（而且可能比所描述的博客文章还要多）。我知道这个问题正在发生在我身上，即使你愿意，这种效果也是不可能做到的（它绘制了与“丢失”字体具有相同度量的虚假“替换”字体，这很奇怪)，但也许我的页面还有其他问题导致了问题。
标签： css iframe internet-explorer-8 rendering font-face