css3動畫問題字體渲染

我有一個問題給你。我目前正在處理文字動畫，並且我有一些小問題。當我使用像-webkit-transform這樣的屬性時，我的字體在動畫過程中從正常變爲稀疏，並在動畫結束時恢復正常。css3動畫問題字體渲染

這裏是我的動畫代碼：

@-webkit-keyframes flipOne { 
    0% { 
     -webkit-transform: perspective(40000px) rotateY(0); 
     -webkit-animation-timing-function: ease-out; 
    } 
    100% { 
     -webkit-transform: perspective(40000px) rotateY(720deg); 
     -webkit-animation-timing-function: ease-in; 
    } 
}

這裏有兩張圖片（之前和期間動畫）

前：

enter image description here

後：

enter image description here

這正是對字體（之前或期間或之後的動畫）

相同的設置是一個渲染設置？如果是的話，你們可以給我一點小費嗎？

在此先感謝。

來源

2012-08-10 Simon

這可能與Safari所做的字體平滑處理有關，即對文本應用反鋸齒。我的猜測是平滑不適用於動畫。

我估計，設置以下將解決該問題：

-webkit-font-smoothing: none;

但它也可能是有點問題的，因爲它最有可能會呈現文本像素化所有的時間。我現在沒有辦法測試這個，對不起。

添加類似

-webkit-font-smoothing: antialiased;

你有可能應用正確的平滑狀態。再次，這只是猜測，可能還沒有一個基於CSS3的解決方案。在這種情況下，您可能不希望將大小調整應用於容器元素（例如縮放），並在字體大小上使用EM值。製作一個響應式容器。

如果這也沒有幫助，那麼除了在這裏應用一些Javascript以外別無它法。

來源

2012-08-10 09:24:10 Hendrik

-webkit-font-smoothing：antialiased;解決了問題！謝謝！ – Simon 2012-08-10 12:26:07

我遇到了類似的問題，並在這裏找到評論。通過添加這樣的：

-webkit-font-smoothing: antialiased;

似乎解決在Safari我的問題（但屏幕不視網膜一個）。但仔細檢查之後，我發現字體看起來比其他瀏覽器中的字體稍微薄一些。所以我改變了這個：

-webkit-font-smoothing: subpixel-antialiased;

這和解決我的問題完美。

如果有人遇到同樣的問題，請在此留言。

來源

2016-09-09 08:40:59 Jin

css3動畫問題字體渲染

回答

相關問題