Css IE8 web字体iframe错误解决方法

（有点烦人的页面）（顺便说一句，这不是我的博客）描述了我昨天在InternetExplorer8上遇到的一个奇怪的bug。该漏洞涉及.EOT web字体和

元素

我还没有深入研究该漏洞的确切触发因素，但基本上是这样的情况：使用web字体的页面将内容加载到

中，这样框架也使用web字体，浏览器就会“污损”页面。以前用web字体呈现的OK文本突然变成了外观糟糕的Arial或其他字体，有点像它自己。有时它会翻转回来，但在随机的用户交互（如鼠标移动）中会再次降级

那篇博文有一个例子。澄清一下，是包含页面出错了，而不是

中的页面（至少在我的经验中是这样）

有没有人找到了比那篇博客中建议的更好的解决方法，那就是强制“重新加载”CSS

元素

@font-face

声明来自何处？（我可以这样做，但这只是一个小小的痛苦，而且它会迫使我将字体设置从文档中移出

，如果我记得这是一个性能问题，我将不得不四处搜寻，再次找到那个花边新闻。）

编辑-更新

嗯。以下是主（容器）页面：

然后问题就消失了（或者至少到目前为止似乎已经消失了）

---

感谢那些帮助过我的人。对于@albert，添加一个总结您尝试的答案，我将向您投票：-）

因此，以下内容不会影响性能（只要您的CSS大小合理），您可以将

标记保留在

中，它可以正常工作，但您基本上仍然在“重新加载”您的

元素（尽管您不是通过重置其url来执行此操作）

在删除

元素时，只需执行以下操作：

var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
    sheets[s].disabled = true;
    sheets[s].disabled = false;
}

var sheets=document.styleSheets；
对于（var s=0，slen=sheets.length；s

重新加载是我真正能想到的工作，因为它似乎是在垃圾收集中从

中删除它。设置一个显然只适用于IE8的

值得注意的是：我最初无法使用Google web字体重新解释此问题，必须专门下载一种

.eot

字体用于此。因此，您的工作可能需要首先使用WOFF字体，并且仅在必要时加载eot

不太确定这是否是你想要的，但如果不是，请澄清，我会根据需要进行编辑

更新1：原因

所以，我已经缩小了问题的原因。我只能在以下情况下重现（这是一个令人讨厌的问题）

• 并且
  包含在父元素中
• 父元素的类已更改
• 类不会更改其应用到的元素的

  显示

  （或者，如果它不会更改
  元素上的整体显示，则会更改）

而且，据我所知，是的，它必须是类名。给定元素的

id

的相同步骤，我无法复制。说真的。这是一个令人讨厌的问题。我会继续挖掘一点

更新2：次要原因

如果绘图时

未完全在浏览器窗口中，它将不会在

窗口中加载字体，并且在需要重新绘制页面时（最明显的是在调整页面大小时）将卸载主窗口的字体。这是一个严重的错误

更新3：什么是解决方案

---

不要使用

display:none；

，而是将元素的高度和宽度设置为

0px

和

overflow:hidden；

，这样您将获得与display none相同的效果，但它不会将其从DOM中删除，从而不会重新绘制页面和使用字体。My from before已更新，因此您可以看到对以前的bug的影响。

如果您刚刚通过fontsquirrel.com生成跨浏览器

@font-face

语法，我认为您甚至不会有问题。您想嵌入：

@font-face{
    font-family: 'DejaVuSansBook';
    src: url('DejaVuSans-webfont.eot'); /* ie9 compat mode */
    src: url('DejaVuSans-webfont.eot?#iefix') format('eot'),  /* ie 6-7-8 */
         url('DejaVuSans-webfont.woff') format('woff'), /* modern browsers */
         url('DejaVuSans-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('DejaVuSans-webfont.svg#webfontLXhJZR1n') format('svg'); /* Legacy iOS */
}

---

如果您发现语法不正确，也可以使用webfont loader脚本。我没有将功能与上面回答的代码进行比较（我确信它可以工作），typekit和googlefonts用来加载他们的字体。

我在研究一个非常类似的情况时遇到了这个问答，除了没有涉及任何iframe。它所需要的只是使用一个google web字体和大量浮动div，使IE8在重新加载后以不同的方式呈现文本。阅读了本文

问题似乎与将加载的字体与多个备选字体列表一起使用有关

我将css中的字体堆栈更改为只有一个选项，错误消失了

---

非常感谢您为我指明了正确的方向！

其他建议的解决方案都不适用于我们，因此我们最终不得不将整个页面隐藏起来，直到页面加载。我们使用以下代码实现了这一点：

<!--[if lte IE 8]>
    <style type="text/css">
        html {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function() {
            $('html').css('visibility', 'visible');
        });
    </script>
<![endif]-->

---

IE<9在处理字体的src属性时有一个bug

---

根据，您可以通过简单地在第一个字体url后添加问号和欺骗浏览器解释url的方式来避免这种情况。这对我来说非常有吸引力。

我们遇到的问题似乎是，当无法加载同名的iframe时（在我们的例子中是404），IE（有时）卸载主页面上的字体。我们的解决方案是在iframed页面上重命名字体（以防由于我们无法控制的原因无法加载字体），并确保它正常加载。

我最终使用的解决方案是

@font-face{
    font-family: 'DejaVuSansBook';
    src: url('DejaVuSans-webfont.eot'); /* ie9 compat mode */
    src: url('DejaVuSans-webfont.eot?#iefix') format('eot'),  /* ie 6-7-8 */
         url('DejaVuSans-webfont.woff') format('woff'), /* modern browsers */
         url('DejaVuSans-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('DejaVuSans-webfont.svg#webfontLXhJZR1n') format('svg'); /* Legacy iOS */
}

<!--[if lte IE 8]>
    <style type="text/css">
        html {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function() {
            $('html').css('visibility', 'visible');
        });
    </script>
<![endif]-->

@font-face {
    font-family: 'NewsGothicFSMedium';
    src: url('NewsGothic-Medium-webfont.eot');
    src: url('NewsGothic-Medium-webfont.eot?#iefix')  format('embedded-opentype'),
         url('NewsGothic-Medium-webfont.woff') format('woff'),
         url('NewsGothic-Medium-webfont.ttf') format('truetype'),
         url('NewsGothic-Medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NewsGothicFSMediumIframe';
    src: url('NewsGothic-Medium-webfont.eot');
    src: url('NewsGothic-Medium-webfont.eot?#iefix')  format('embedded-opentype'),
         url('NewsGothic-Medium-webfont.woff') format('woff'),
         url('NewsGothic-Medium-webfont.ttf') format('truetype'),
         url('NewsGothic-Medium-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

<html>
<head>
<script>
function markFrameLoaded() { 
    // noop for the well behaved browsers of the world
}
</script>
<!--[if IE 8]>
<script>
function markFrameLoaded() {
    var frameCount = window.frames.length;
    for ( var f = 0 ; f < frameCount ; f++ ) {
        var styleCount = window.frames[f].document.styleSheets.length;
        for ( var s = 0 ; s < styleCount ; s++ ) {
            var sheet = window.frames[f].document.styleSheets[s];
            sheet.disabled = true;
            sheet.disabled = false;
        }
    }
}
</script> 
<![endif]-->
</head>
<frameset rows="*,*">
<frame src="top.html" onload="markFrameLoaded()">
<frame src="bottom.html" onload="markFrameLoaded()">
</frameset>
</html>