首頁 >web前端 >css教學 >為什麼在 Chrome 中進行 CSS 縮放後我的文字變得模糊,如何修復它?

為什麼在 Chrome 中進行 CSS 縮放後我的文字變得模糊,如何修復它?

DDD
DDD原創
2024-12-15 14:50:35607瀏覽

Why is My Text Blurry After CSS Scaling in Chrome, and How Can I Fix It?

在Chrome 中解決CSS 縮放後的模糊文字

Chrome 使用者最近在應用CSS 變換:scale() 後遇到文字模糊,特別是使用以下:

 0% {<pre class="brush:php;toolbar:false">opacity: 0;
-webkit-transform: scale(.3);

}

50% {

opacity: 1;
-webkit-transform: scale(1.05);

}

70% {

-webkit-transform: scale(.9);

70% {

-webkit-transform: scale(1);
100% {



}

}

此問題在 Chrome 中尤其存在,不包括 Safari 等其他 Webkit 瀏覽器。

解決方案:

為了緩解這個問題,有兩種方法已被證明有效:

1.背面可見性:

將背面可見性設定為「隱藏」可將渲染重點放在物件的正面,從而緩解問題:

backface-visibility:hidden;<p> </p>
2. TranslateZ:

使用translateZ屬性強制硬體加速,有效解決模糊問題:

transform:translateZ (0);<p></p>

可選地,可以透過以下方式獲得額外的清晰度合併:

-webkit-font-smoothing:子像素抗鋸齒;<p></p>
嘗試不同的組合可能會進一步增強渲染結果。

以上是為什麼在 Chrome 中進行 CSS 縮放後我的文字變得模糊,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn