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

Question

如果您使用的是Mac，请参阅http://jsfiddle.net/CVwXV/2/。

当您在Mac上的Chrome或Safari（webkit）上查看此内容时，文本会跳转到更浅的阴影/颜色。

在Mac上的firefox上没问题。

如果您删除html中包含youtube视频的第二个ARTICLE并再次运行，它会在webkit中呈现。

有什么想法吗？肯定不只是我的机器这样做。

感谢。

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

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

然后没有跳跃......但它仍然看起来在firefox和chrome之间有很多不同。左边是FF，右边是Chrome。

Answer 1

好吧，我一直有同样的问题，我想我找到了一个“好”的解决方案。我有一个div，它与一个内部有Flash的iframe略微重叠。重叠的div让它的字体平滑搞砸了。为了解决这个问题，我只需将z-index放在iframe和重叠的div上。要使其工作，iframe必须位于div之上（更高z-index）。在上面的示例中，似乎没有任何内容与iframe重叠，但每个元素的边界可能会略微重叠。您可以使用Safari或Chrome中的Web检查器查看它。但我首先将z-index放在iframe和乱搞字体平滑的元素上。

Answer 2

我按照上面的marktewie链接进行了一些自己的测试。通过反复试验，我已经在我正在处理的网站上解决了这个问题。它发生在三个不同的野生动物和铬中。

第一个例子是在与包含文本的元素相同的容器中显示和隐藏下拉列表。当在jQuery中调用.show（）时，文本会变得更轻，当调用.hide（）时，它会变得更重。

第二个例子是当包含文本的固定元素与包含文本的另一个元素重叠时它会变得更亮，当下面的文本层移开时，固定元素副本将再次变得更重。

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

看起来，当文本变得越来越轻时，字体的渲染从“subpixel-antialiased”变为“antialiased”。通过设置

强制所有类型的'抗锯齿'平滑

-webkit-font-smoothing：antialiased;

在主体上，在页面加载时使用更轻的重量渲染字体，并且在任何这些实例中都不会更改。

Answer 3

我也遇到了这个问题。

我通过将iFrame放在两个div中来修复它。我设置位置的第一个div：relative，width：100％，以及我的播放器所需高度的高度。我设置的第二个div：绝对。

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