嵌入YouTube视频会在iframe外部的元素上更改字体外观 [英] Embedding YouTube video changes font look on elements outside the iframe

问题描述

我将YouTube视频添加到网页上，这对我的网页上现有的文字有着不可思议的影响。我已经把它缩小到一个很小的例子，至少在Mac和Chrome浏览器的Safari浏览器显示问题很好：

http://jsfiddle.net/gothick/wjNzf/5/

<这基本上是一段文字，使用当前标准的基于YouTube iframe的嵌入式视频嵌入到视频中。

在页面加载时请仔细观看，当嵌入式视频嵌入完成加载后，您会发现嵌入式视频上方的文字段明显偏轻。 / p>

我选择的白底黑色外观很明显地显示了这个问题，但是跳转到更轻的字体也更加巧妙，正常颜色。

我看不到任何CSS属性的变化，我不知道如何覆盖/防止这种变化。据我所知，使用webkit的检测工具，字体样式保持不变。

任何想法我可以解决这个问题？其他人可以看到吗？开始认为这是我的设置特有的东西...

这是拍摄前后。我在一秒之内抓住了一个，一个在视频加载到页面之前，一个：

解决方案

使用以下内容：

  -webkit-font-smoothing：antialiased; 
  

这个固定了我。

I'm adding a YouTube video to a web page, and it's oddly affecting the existing text on my page. I've narrowed it down to a small example which shows up the problem quite well, at least in Chrome and Safari on Mac:

http://jsfiddle.net/gothick/wjNzf/5/

This is basically a paragraph of text with a video embedded using the current, standard YouTube iframe-based embed below it.

Watch carefully as that page loads, and you'll see the apparent weight of the paragraph of text above the embedded video get lighter when the YouTube embed has finished loading.

The white-on-black look I've chosen shows up the problem quite distinctly, but the "jump to a lighter font" is also there, more subtly, with normal colours.

I can't see any CSS properties changing, and I can't figure out how to override/prevent this change. As far as I can see using webkit's inspection tools, the font style remains the same.

Any ideas how I can fix this? And can other people see it? Starting to think it's something peculiar to my setup...

Here's before and after shots. I grabbed these within a second of each other, one before the video loaded into the page, one after:

解决方案

Use the following:

-webkit-font-smoothing : antialiased; 

This fixed it for me.

这篇关于嵌入YouTube视频会在iframe外部的元素上更改字体外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！