当iframe用于嵌入flash内容时，Webkit字体呈现

Question

如果你使用的是苹果电脑，请查看http://jsfiddle.net/CVwXV/2/。

当你在Chrome或mac上的Safari (webkit)上看到这一点时，文本会跳转到更浅的阴影/颜色。

在mac上的firefox上，这很好。

如果您删除html中包含youtube视频的第二篇文章并再次运行，它在webkit中呈现良好。

有什么想法吗？当然不仅仅是我的机器在做这件事。

谢谢。

编辑:似乎与抗锯齿有关。http://jsfiddle.net/CVwXV/3/如果我这样做了..

-webkit-font-smoothing: antialiased !important;
font-smoothing: antialiased !important;

那就没有跳跃了..。但是在firefox和chrome之间看起来还是有很大的不同。FF在左边，Chrome在右边。

​

​

Answer 1

好吧，我也遇到了同样的问题，我想我找到了一个"ok“的解决方案。我有一个div，它稍微重叠了一个内部有Flash的iframe。重叠的div把字体平滑搞得一团糟。为了解决这个问题，我只需要把z-index放在iframe和重叠的div上。要使其正常工作，iframe必须位于div (更高的z-index)之上。在上面的示例中，似乎没有任何东西与iframe重叠，但每个元素的边界可能会稍微重叠。你可以使用Safari或Chrome中的web检查器来查看它。但我会先把z-index放在iframe和那些搞乱了字体平滑的元素上。

Answer 2

我按照上面markstewie的链接做了一些我自己的测试。通过反复试验，我已经在我正在工作的网站上解决了这个问题。它在safari和chrome中出现了三种不同的情况。

第一个实例是在与包含文本的元素相同的容器中显示和隐藏下拉菜单时。当在jQuery中调用.show()时，文本会变得更轻，而当调用.hide()时，文本会变得更重。

第二种情况是，当一个包含文本的固定元素与另一个包含文本的元素重叠时，它将变得更轻，而当下面的文本层移开时，固定元素的副本将再次变得更重。

第三个是当flash元素加载到页面上时，字体会变得更轻。

看起来，当文本变得更轻时，字体的呈现方式正在从“亚像素抗锯齿”变为“抗锯齿”。通过在所有类型上强制“抗锯齿”平滑

-webkit-font-平滑:抗锯齿；

在正文上，字体在页面加载时以更清晰、更轻的粗细呈现，并且在任何情况下都不会改变。

Answer 3

我也遇到了这个问题。

我通过将iFrame放在两个div中修复了它。在第一个div中，我设置了position: relative，width: 100%，并将height设置为我的球员所需的高度。第二个div我设置为position: absolute。

由于iFrame现在位于一个绝对定位的div中，它不再强制页面上的文本在Safari中加载页面时进行抗锯齿处理。