使用 iframe 嵌入 Flash 内容时的 Webkit 字体渲染答案

【问题标题】：Webkit font rendering when iframe used to embed flash content使用 iframe 嵌入 Flash 内容时的 Webkit 字体渲染
【发布时间】：2013-01-10 12:15:54
【问题描述】：

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

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

在 mac 上的 firefox 上很好。

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

有什么想法吗？这肯定不仅仅是我的机器在做这个。

谢谢。

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

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

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

【问题讨论】：

不只是我。刚刚找到这个stackoverflow.com/questions/9516319/…
我没有看到任何跳转（Chrome Mac v. 18.0.1025.168）
如果你点击最后一个链接，你不会。但是如图所示将 chrome 放在 firefox 旁边，您应该会明白我在说什么。
您找到解决方案了吗？我在使用 Chrome 和 Safari 时遇到了这个问题，这让我发疯了。 :(
我没有对不起达斯汀。我浪费了我生命中的许多小时，我永远不会回来试图找出原因。这似乎是渲染在不同浏览器中的工作方式。

标签： css fonts webkit

【解决方案1】：

好的，我也遇到了同样的问题，我想我找到了一个“好的”解决方案。我有一个 div 稍微重叠了一个 iframe，里面有 Flash。那个重叠的 div 的字体平滑搞砸了。要修复它，我只需将z-index 放在 iframe 和重叠的 div 上。要使其工作，iframe 必须位于 div 的顶部（更高的 z-index）。在上面的示例中，似乎没有任何东西与 iframe 重叠，但每个元素的边界可能略有重叠。您可以使用 Safari 或 Chrome 中的网络检查器查看它。但我只是先将z-index 放在 iframe 上，然后再将那些弄乱字体平滑的元素放在上面。

【讨论】：

解决这个问题我们要做的就是把z-index: 1 !important;放在body标签上。

【解决方案2】：

我按照上面 markstewie 的链接做了一些我自己的测试。通过反复试验，我已经在我正在处理的网站上解决了这个问题。它发生在 safari 和 chrome 中的三个不同实例中。

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

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

第三个是当 Flash 元素加载到页面上时，字体会变浅。

当文本变浅时，字体的渲染似乎从“亚像素抗锯齿”变为“抗锯齿”。通过设置

强制对所有类型进行“抗锯齿”平滑

-webkit-font-smoothing : 抗锯齿；

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

【讨论】：

【解决方案3】：

我也遇到了这个问题。

我通过将 iFrame 放置在两个 div 中来修复它。我将第一个 div 设置为位置：相对，宽度：100%，并将高度设置为我的播放器所需的高度。我设置为位置的第二个 div：绝对。

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

【讨论】：