Poi*_*nty 29 css iframe rendering font-face internet-explorer-8
这个博客文章(那里有点讨厌的页面)(顺便说一下,这不是我的博客)描述了我昨天在Internet Explorer 8中遇到的一个奇怪的错误.该bug涉及.EOT网络字体和<iframe>元素.
我没有广泛研究错误的确切触发器,但基本上是这样的情况:使用网页字体加载内容以<iframe>使框架也使用网络字体的页面被浏览器"污损".使用Web字体呈现的先前正常文本突然转变为看起来很糟糕的Arial或其他东西,单独排序.有时它会翻转,只会在鼠标移动等随机用户交互中再次降级.
那篇博文有一个例子.澄清一下,它是包含在内的页面,而不是页面中的内容<iframe>(至少,根据我的经验,情况就是如此).
是否有人找到了比该博客中建议的更好的解决方法,即强制<link>从@font-face声明到来的"重新加载"CSS 元素？(我可以做到这一点,但这只是一个小小的痛苦,而且它会迫使我将我的字体设置移出我的文档<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,添加一个总结你尝试过的答案的答案,我会向你投票:-)
Lov*_*ing 25
因此,以下内容没有性能损失(只要您的CSS大小合适),您可以保留<link>标签<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:原因
所以,我已经缩小了问题的原因.如果发生以下情况,我只能重现(这是一个令人讨厌的人).
<iframe>包含在父元素中display它所应用的元素(或者实际上,如果它不会更改<iframe>元素的整体显示)而且,据我所知,是的,它必须是类名.鉴于id元素的相同步骤,我无法重现.认真.这个是令人讨厌的.我会继续挖掘一下.
更新2:次要原因
如果<iframe>在绘图时没有完全在浏览器窗口中,它将不会在<iframe>窗口中加载字体,并且每当必须重绘页面时将卸载主窗口的字体(最明显的是在调整大小时).这是一个粗糙的错误.
更新3:应该是什么解决方案
而不是使用display: none;,设置元素的高度和宽度0px和overflow: hidden;,你将获得与显示无相同的效果,但它不会从DOM中删除它,因此不会重绘页面并采用您的字体.我之前的测试页面已经更新,因此您可以看到对以前的错误的影响.