iframe用於嵌入Flash內容時的Webkit字體渲染

如果您在Mac上，請參閱http://jsfiddle.net/CVwXV/2/。iframe用於嵌入Flash內容時的Webkit字體渲染

當你在Mac或Mac上使用Chrome或Safari瀏覽器（webkit）時，文本會跳到更淺的陰影/顏色。

在mac上的firefox上沒問題。

如果您刪除HTML中的第二個ARTICLE並使用其中的youtube視頻並再次運行，它會在webkit中呈現良好效果。

任何想法？這肯定不只是我的機器這樣做。

謝謝。編輯：似乎是與抗鋸齒有關。 http://jsfiddle.net/CVwXV/3/ 如果我做..

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

那麼有沒有跳...但它仍然看起來Firefox和Chrome之間有很大不同。左邊是FF，右邊是Chrome。

demo

來源

2012-05-06 markstewie

這不只是我。剛剛發現這個http://stackoverflow.com/questions/9516319/embedding-youtube-video-changes-font-look-on-elements-outside-the-iframe – markstewie

我沒有看到任何跳轉（Chrome Mac v。18.0 .1025.168） – Ben

如果你點擊最後一個鏈接，你不會。但是，如圖中所示，將chrome放在Firefox旁邊，你應該看看我在說什麼。 – markstewie

好吧，我一直有這個同樣的問題，我想我發現了一個「OK」的解決方案。我有一個div，它與內部有Flash的iframe略有重疊。這個重疊的div讓它的字體平滑了。要解決它，我只需要在iframe和重疊的div上都放置z-index。要使其工作，iframe必須位於div的頂部（更高的z-index）。在上面的例子中，似乎沒有任何內容與iframe重疊，但每個元素的邊界可能會稍微重疊。您可以通過在Safari或Chrome中使用網絡檢查器來查看它。但是我只是首先將iframe上的z-index以及弄亂了字體平滑的元素。

來源

2012-08-01 14:27:31 Dustin

我們只需要做解決這個問題是把'z-index：1！important;'放在body標籤上。 –

我跟着上面的markstewie的鏈接，並做了一些我自己的測試。通過試驗和錯誤，我已經解決了我正在工作的網站上的這個問題。它在safari和chrome中出現三種不同的情況。

第一個實例是在與包含文本的元素相同的容器中顯示和隱藏下拉列表。當jQuery中調用.show（）時，文本會變得更輕，當調用.hide（）時，它會變得更重。

第二種情況是，當一個包含文本的固定元素與另一個包含文本的元素重疊時，它將變得更輕，而當下面的文本層移開時，固定元素的副本會再次變得更重。

第三個是當一個flash元素加載到頁面時，字體會變得更輕。

看起來，當文本變得更輕時，字體的呈現從「亞像素反鋸齒」變爲「反鋸齒」。通過設置

強制所有類型的「反鋸齒」平滑-webkit-font-smoothing：antialiased;

在正文上，字體在頁面加載時呈現更清晰的輕量級，並且在任何這些實例中都不會更改。

來源

2012-08-15 13:48:00 Jeffpowrs

我也有這個問題。

我通過將iFrame放入兩個div來修復它。我設置的第一個div位置：相對，寬度：100％，高度達到我的播放器所需的高度。我設置的第二個div位置：絕對。

隨着iFrame現在處於絕對定位的div中，它不再強制頁面上的文本在Safari中加載頁面時進行反鋸齒。

來源

2013-01-10 04:15:54 Luther

iframe用於嵌入Flash內容時的Webkit字體渲染

回答

相關問題