当iframe用于嵌入flash内容时，Webkit字体呈现 [英] Webkit font rendering when iframe used to embed flash content

问题描述

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

Please see http://jsfiddle.net/CVwXV/2/ if you are on a Mac.

当你在Mac上的Chrome或Safari（webkit）上看到这个时，文本会跳到一个浅得多的阴影/颜色。

When you look at this on Chrome or Safari (webkit) on mac the text jumps to a much lighter shade/color.

在firefox上mac很好。

On firefox on mac it's fine.

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

If you remove the second ARTICLE in the html with the youtube video in it and run again, it renders fine in webkit.

任何想法？这肯定不只是我的机器这样做。

Any ideas? It's surely not just my machine doing this.

谢谢。

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

Seems to be something to do with antialiasing. http://jsfiddle.net/CVwXV/3/ If I do..

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

然后没有跳转...但是它仍然看起来火狐和chrome之间有很多不同。

Then there is no jump... but it still looks A LOT different between firefox and chrome. FF on left, Chrome on right.

推荐答案

好吧，我一直有这个问题，我想我找到了一个ok解决方案。我有一个div，它与Flash内部的iframe略有重叠。这重叠的div有它的字体平滑拧紧。为了解决它，我只是把 z-index 在iframe和重叠的div。要使其工作，iframe必须在div（高于 z-index ）的顶部。在上面的例子中，没有任何东西与iframe重叠，但每个元素的边界可能会轻微重叠。您可以在Safari或Chrome中使用网络检查器查看。但是我只是在iframe上放置 z-index ，以及那些混乱了字体平滑的元素。

Alright, I've been having this same issue and I think I found an "ok" solution. I had a div that was slightly overlapping an iframe that had Flash inside of it. That overlapping div had it's font-smoothing screwed up. To fix it I just had to put z-index on both the iframe and the overlapping div. To make it work the iframe has to be on top of the div (higher z-index). In the example above it doesn't appear that anything is overlapping the iframe, but the boundary of each element could be overlapping slightly. You'd be able to see it by using the web inspector in Safari or Chrome. But I'd just start by putting z-index on the iframe and the elements that have messed up font-smoothing.

这篇关于当iframe用于嵌入flash内容时，Webkit字体呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！