IE8网络字体iframe错误解决方法 [英] IE8 web font iframe bug workarounds
问题描述
这篇博文（有点烦人的页面）（这是不是我的博客的方式）描述了一个奇怪的错误，我昨天在Internet Explorer 8中碰到。该错误涉及.EOT web字体和< iframe> 元素。
我没有广泛研究触发器，但基本上是使用将内容加载到< iframe> 中的网络字体的页面，使得框架也 >使用网络字体被浏览器污染。用网络字体呈现的先前OK文本突然转移到可怕的Arial或别的什么，自己。有时它会回来，只是随机的用户交互，如鼠标移动降级。
这篇博文有一个例子。要澄清，它是包含页面弄乱了，而不是< iframe> （至少，在我的经验，到目前为止）的页面。< link> 元素从 @ font-face 声明来了？ （我可以这样做，但它会是一个小的痛苦，加上它会迫使我把我的字体设置从我的文档< head> 一个性能问题;我必须在周围找到这个tidbit。）
编辑— 更新
<！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 '目标'）;
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（）'>点击我< / button>
< div id ='floater'>
< div id ='target'>< / div>
< button type ='button'onclick ='unload（）'>关闭< / button>
< / body>
< / html>
框架页面具有相同的 @ font-face 和一个虚假邮件。
问题似乎与使用加载的字体有一个以上的替代字体。我（没有好的理由）在我的font-family值中折腾了几个类似的更常见的字体。当我将它们删除回：
.title {font-family：bold-display，sans-serif; }
那么问题就消失了（至少似乎已经走了） / p>
感谢那些已经帮助过的人。对@albert，添加一个总结您尝试的答案，我会upvote你： - ）
（ ），您可以在<$ c>中留下< link> 标记$ c>< head> ，它工作没有问题，但你仍然基本上重新加载您的< link>
在删除< iframe> 元素时，只需执行以下操作：
var sheets = document.styleSheets;
for（var s = 0，slen = sheets.length; s< slen; s ++）{
sheets [s] .disabled = true;
sheets [s] .disabled = false;
}
重新加载是我真正想象的工作，因为它似乎被删除它在从< iframe> 的垃圾回收中。设置显然只适用于IE 8的测试页。
注意：我最初无法使用Google网络字体重现此问题，并且不得不专门下载用于此的 .eot 字体。所以你的工作可能首先使用WOFF字体，如果必要，只加载EOT。
不完全确定如果这是你正在寻找，但如果不是，
更新1：原因 p>所以，我已经缩小了问题的原因。- 和
< ; iframe>包含在父元素中 - 父元素的类已更改
- 不是
显示（或者，如果它不改变< ; iframe> 元素） 而且，从我可以知道，是的，它必须是班级名称。我无法重现在元素的 id 上给出相同的步骤。认真。这是一个讨厌的。
更新2：次要原因
>如果< iframe> 在绘制时未完全在浏览器窗口中，它将不会在< iframe> code>窗口，并将卸载主窗口的字体，每当它必须重绘页面（最显着的是当它调整大小）。这是一个错误的错误。
更新3：应该是什么解决方案 >而不是使用 display：none; ，将元素的高度和宽度设置为 0px code> overflow：hidden;
，你将获得与display none相同的效果，但是它不会从DOM中删除它，从而不会重绘页面和占用你的字体。我之前的测试页已更新，因此您可以看到对以前是错误的影响。 This blog post (slightly annoying page there) (and that's not my blog by the way) describes a bizarre bug I ran into yesterday in Internet Explorer 8 only. The bug involves .EOT web fonts and <iframe> elements.
I haven't extensively researched the exact trigger for the bug, but it's basically the case that a page using a web font that loads content into an <iframe> such that the frame also uses a web font becomes "defaced" by the browser. The previously-OK text rendered with the web font suddenly shifts to awful-looking Arial or something else, sort-of on its own. Sometimes it flips back, only to degrade again on random user interactions like mouse moves.
That blog post has an example. To clarify, it's the containing page that gets messed up, not the page in the <iframe> (at least, that's the case so far in my experience).
Has anybody found a better workaround than what's suggested in that blog, which is to force a "reload" of the CSS <link> element from whence the @font-face declarations come? (I could do that but it'd be a minor pain, plus it would force me to move my font setup out of my document <head> which if I recall is a performance issue; I'll have to scrounge around and find that tidbit again.)
edit — update
OK here's a test page. Here's the main (container) 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>
The frame page has the same @font-face and a dummy message.
The problem appears to have something to do with using the loaded fonts with a list of more than one alternate font. I (for no good reason) had tossed in a couple of similar more-common fonts in my "font-family" values. When I dropped them back to:
.title { font-family: bold-display, sans-serif; }
then the problem went away (or at least it seems to have gone away so far).
Thanks to those who've helped out. To @albert, add an answer summarizing what you tried and I'll upvote you :-)
So, there is no performance hit with the following (as long as your CSS is reasonably sized), you get to leave the <link> tag in <head>, and it works without issue, but you are still basically 'reloading' your <link> elements (though you are not doing so by resetting their url).
On the removal of the <iframe> element, simply do the following:
var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
sheets[s].disabled = true;
sheets[s].disabled = false;
}
Reloading is all I can really think of as working since it seems to be removing it in garbage collection from the <iframe>. Set up a test page that obviously only works for IE 8.
Of Note: I was originally unable to reprodcue this issue using Google web fonts, and had to specifically download a .eot font for use for this. So your work around maybe to use WOFF fonts first, and only load EOT if necessary.
Not exactly sure if this is what you were looking for, but if it's not, please clarify and I'll edit as necessary.
Update 1: The cause
So, I've narrowed down the cause of the issue. I am only able to reproduce if the following occurs (and this is a nasty one folks).
- And
<iframe>is contained within a parent element - The parent element's class is changed
- The class does not change the
displayof the element it is being applied to (or really, if it does not change the overall display on the<iframe>element)
And, from what I can tell, yes, it has to be the class name. I was unable to reproduce given the same steps on the id of an element. Seriously. This one is a nasty one. I'll keep digging a bit.
Update 2: A Secondary Cause
If the <iframe> is not fully in the browser window on draw, it will not load the font within the <iframe> window, and will unload the font for the main window whenever it has to redraw the page (most notably when it is resized). This is a gnarly bug.
Update 3: What should be a solution
Instead of using display: none;, set the height and the width of the element to be 0px and the overflow: hidden;, and you'll get the same effect as display none, but it will not remove it from the DOM, thereby not redrawing the page and taking your font. My test page from before has been updated, so you can see the effect on what used to be the bug.
这篇关于IE8网络字体iframe错误解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
