css – IE8 web字体iframe错误解决方法

This blog post(有点讨厌的页面)(这不是我的博客的方式)描述了一个奇怪的错误，我昨天在Internet Explorer 8中碰到。该错误涉及.EOT web字体和< iframe>元素。

我没有广泛地研究该错误的确切触发器，但基本上是这样的情况：使用网络字体的页面将内容加载到< 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你:-)

解决方法

所以，没有性能打击以下(只要你的CSS是合理的大小)，你得离开< link>标记在< head>，并且它工作没有问题，但你仍然基本上’重新加载你的<链接>元素(虽然你不是通过重置他们的url)。

在删除< 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的影响。

css – IE8 web字体iframe错误解决方法

解决方法

相关推荐