當元素是CSS3動畫時應用字體效果/處理的Safari

我在我的網站上使用自定義字體。當元素是CSS3動畫時應用字體效果/處理的Safari

@font-face { 
    font-family: 'ProximaNovaCondensed-Regular'; 
    src: url('/media/fonts/proximanovacond-regular-webfont.eot'); 
    src: url('/media/fonts/proximanovacond-regular-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/media/fonts/proximanovacond-regular-webfont.woff') format('woff'), 
    url('/media/fonts/proximanovacond-regular-webfont.ttf') format('truetype'), 
    url('/media/fonts/proximanovacond-regular-webfont.svg#proxima_nova_cn_rgregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

當施加脈動CSS3動畫的文本元素，字體呈現方法似乎改變。

看到這個比較圖像：

enter image description here

這是在Safari渲染。

我發現這個Q/A：Safari changing font weights when unrelated animations are running

據有什麼表示，渲染由GPU一旦應用於動畫完成。在鏈接的Q/A中，問題集中在除了受影響的元素之外的其他元素，在我的情況下，實際元素會受到影響。

的問題是：

我可以採用某種關閉或修改這個行爲，讓我在我的頁面得到準確的（統一）字體渲染品質，無論我是否使用了動畫或不？

來源

2012-12-24 SquareCat

沒有完美的解決方案，但您可以嘗試添加-webkit-font-smoothing: antialiased;並查看是否有幫助。它可能會給你一個稍微更薄的字體，但它至少是統一的。

編輯 - 對不起，我剛纔看到「antialiased」修復程序發佈在您鏈接的Q/A中。

有時，將-webkit-backface-visibility: hidden;添加到受影響的元素有幫助，但我不確定爲什麼。

您也可以嘗試-webkit-transform: translate3d(0,0,0);這將迫使硬件加速和使字體，如上面的修復，統一，但稍薄......

希望幫助！

來源

2012-12-28 18:47:44

就是這樣，看看http://cantina.co/2012/05/18/little-details-subpixel-vs-greyscale-antialiasing/瞭解更多關於子像素渲染的細節。 – mddw

我認爲您提到的解決方案是目前唯一可用的解決方案。我也沒有聽說過這些。問題是，無論我應用隱藏的背景知名度還是translate3d（0,0,0） - 在這兩種情況下，字體呈現都將更改爲我的兩幅圖像中的第一幅顯示的內容。所以基本上看來，在動畫運行時應用到字體的東西，然後靜態地應用到它們。 – SquareCat

當元素是CSS3動畫時應用字體效果/處理的Safari

回答

相關問題