嵌入YouTube视频会改变iframe外部元素的字体样式

Question

我正在向网页添加YouTube视频，但它会奇怪地影响我的页面上现有的文本。我已经缩小了范围，找到了一个简单的例子，在Mac上至少在Chrome和Safari中很好地展示了这个问题：http://jsfiddle.net/gothick/wjNzf/5/。这基本上是一段文本与当前标准的基于iframe的YouTube嵌入式播放器以下的嵌入视频。

当页面加载时仔细观察，您会发现嵌入式视频加载完成后上面的文本段落的视觉效果变轻了。我选择的白底黑字的外观可以清楚地显示出这个问题，但是“跳转到较轻的字体”的问题也存在于常规颜色中，只不过更加微妙而已。我看不到任何CSS属性发生了变化，并且我无法弄清如何覆盖/防止此更改。据我所见，使用webkit的检查工具，字体样式保持不变。是否有任何想法可以解决这个问题？其他人能看到吗？开始认为这是我设置中的独特问题...

这是之前和之后的截图。我在视频加载到页面之前和之后的一秒内抓取了这些截图：

- Matt Gibson

---

奇怪，Chrome/Linux 上看不到它。也许包括视频会导致它从软件渲染器切换到硬件渲染器或其他什么东西？ - Dagg Nabbit

@GGG 感谢您的查看！它确实感觉渲染器正在改变，但样式没有改变。就像它可能改变了子像素渲染，而不是实际的字体重量。这很奇怪。我将嵌入一些图像，展示“之前”和“之后”的情况，这可能有助于人们理解我所看到的内容。 - Matt Gibson

只是想补充一下，我在Windows上的Chrome/IE/FF中没有看到任何区别。 - Andrew

@TheWaxMann 感谢您的关注。这绝对不是针对计算机特定的问题，因为我还有另一台Mac也出现了这个问题。虽然在我的Firefox中没有发生这种情况。也许这是特定于OSX和Webkit的问题。当我能够接触到其他平台时，我会进行更多的测试... - Matt Gibson

我也有这个问题！！https://dev59.com/bmPVa4cB1Zd3GeqP6ocW。还没有解决方案吗？ - markstewie

Answer 1

请使用以下内容：

-webkit-font-smoothing : antialiased; 

这对我解决了问题。

- mirso

Answer 2

终于在您的帖子中找到了这个奇怪的问题。它影响我管理的两个网站，但只在Mac上的webkit浏览器中出现问题，据我所知。Mac Firefox可以正常呈现文本，即使存在嵌入式视频。

这些页面有视频嵌入，并清楚地显示了问题。您可以看到文本从强（正常）呈现切换到“暗淡”-没有亚像素字体平滑。

http://makanipower.com/why-airborne-wind/

http://andrewnimmo.com/mistersaturdaynight/

为了比较，请查看这些没有视频的页面：

http://makanipower.com/faq/

http://andrewnimmo.com/mistersaturdaynight/2009/09/justin-carter-2/

仅仅是为了解决问题而做出贡献，因为我不知道为什么会发生这种情况。我看到有人提出jquery冲突的问题，但在andrewnimmo.com上，我已经在头部禁用了所有javascript，例如禁用了我的js菜单。

这两个都是Wordpress安装程序，顺便说一下。

奇怪的是，在第二个网站的实时版本中没有复制这个问题，

http://mistersaturdaynight.com/

该网站使用不同的WP主题（coraline）。并且，还有一些JavaScript。字体平滑度完美。

这两个出现问题的网站运行在非常相似的WP主题代码上，但我找不到任何可疑的东西，除了我已经在其中一个网站上消除的js，但没有解决问题。

- nimmolo

---

在我看来，-webkit-font-smoothing: subpixel-antialiased; 和 -webkit-font-smoothing: antialiased; 的区别是... 我正在使用这个作为例子：http://maxvoltar.com/archive/-webkit-font-smoothing - nimmolo

谢谢Gaurav - 我当时是一个绝对的新手，不允许发布多个链接！！ - nimmolo

哎呀，我刚刚禁用了andrewnimmo.com网站上的所有javascript，以为它可能会干扰，但我仍然看到了锯齿状的文本。而在mistersaturdaynight.com上，尽管它同时具有iframes和js，但我仍然没有看到锯齿状的文本。 - nimmolo

谢谢，我会看看能否根据您提供的有用信息缩小问题范围。 - Matt Gibson

有趣。我认为你关于字体平滑的观点是正确的 - 在我的jsFiddle示例中，如果我在body上明确设置-webkit-font-smoothing：subpixel-antialiased;，则视频加载前后文本的外观保持不变。示例在这里。 - Matt Gibson