在我們的頁面中，經(jīng)常會出現(xiàn)這樣的問題，一塊區(qū)域內(nèi)的文本或者邊框，在展示的時候，變得特別的模糊，如下(數(shù)據(jù)經(jīng)過脫敏處理)：

正常而言，應(yīng)該是這樣的：

emmm，可能大圖不是很明顯，我們?nèi)∫患毠?jié)對比，就非常直觀了：

何時觸發(fā)這種現(xiàn)象?

那么?什么時候會觸發(fā)這種問題呢?在 Google 上，其實我們能搜到非常多類似的案例，總結(jié)而言：

1.當文本元素的某個祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作時，容易出現(xiàn)這種問題

當然，這只是必要條件，不是充分條件。繼續(xù)深入探究，會發(fā)現(xiàn)，必須還得同時滿足一些其它條件：

2.元素作用了 transform: translate() 或者 transform: scale() 后的計算值產(chǎn)生了非整數(shù)

譬如，上述案例觸發(fā)的 CSS 代碼如下：

.container {
    position: absolute;
    width: 1104px; 
    height: 475px;
    top: 50%;
    transform: translateY(-50%);
    // ...
}

由于元素的高度為 475px，translateY(-50%) 等于 237.5px，非整數(shù)，才導致了內(nèi)部的字體模糊。

但是，需要注意的是，并非所有產(chǎn)生的非整數(shù)都會導致了內(nèi)部的字體模糊。

這里有個簡單的示意：

還是上述的例子，當高度從 477px 一直調(diào)整到 469px 的過程中，只有 477px 和 475px 導致了模糊，而 473, 471, 469 則沒有。所以，這也只是引發(fā)模糊的一個必要條件。

3.文本內(nèi)容是否模糊還與屏幕有關(guān)，高清屏(dpr > 2)下不容易觸發(fā)，更多發(fā)生在普通屏幕下(dpr = 1)

在我實測的過程中還發(fā)現(xiàn)，這個現(xiàn)象基本只會發(fā)生在 dpr 為 1 的普通屏幕下。

類似于 MAC 的高清屏幕則不太會觸發(fā)這個問題。

dpr = 物理像素 / 設(shè)備獨立像素，表示設(shè)備像素比。這個與我們通常說的視網(wǎng)膜屏(多倍屏，Retina屏)有關(guān)。設(shè)備像素比描述的是未縮放狀態(tài)下，物理像素和設(shè)備獨立像素的初始比例關(guān)系。

并非所有瀏覽器都是這個表現(xiàn)，基本發(fā)生在 chromium 內(nèi)核。

為何發(fā)生這種現(xiàn)象呢?

那么，為何會發(fā)生這種現(xiàn)象?針對這個問題，沒有找到特別官方的回答，普遍的認為是因為：

由于瀏覽器將圖層拆分到 GPU 以進行 3D 轉(zhuǎn)換，而非整數(shù)的像素偏移，使得 Chrome 在字體渲染的時候，不是那么的精確。

關(guān)于這個問題，感興趣的可以再看看這兩個討論：

• Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.[1]
• Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275[2]

如何解決?

那么針對這個問題，我們該如何解決呢?社區(qū)里給出的一種方案：

1.給元素設(shè)置 -webkit-font-smoothing: antialiased

font-smooth CSS 屬性用來控制字體渲染時的平滑效果，該特性是非標準的，我們應(yīng)該盡量不要在生產(chǎn)環(huán)境中使用它。并且在我的實測中，這個方法不太奏效。

2.保證運用了 transform: translate() 或者 transform: scale() 的元素的高寬為偶數(shù)

如果你賦予給元素的 transform 的值非常明確，譬如我上文例子中的利用其來對元素進行水平垂直居中 -- transform: translate(-50%, -50%)，讓元素的高寬為偶數(shù)這個方法是可行的，但如果當你無法確定transform 的值，譬如 transform: translateX(-31.24%) 或者是 transform: scale(1.05)，那這個方法依舊無法奏效。

3.棄用 transform

如果這個問題對你的頁面非常致命，那么只能棄用 transform，尋找替代方案。大部分的時候，我們還是可以找到不使用 transform 的替代方案的。

總結(jié)一下，本文簡單探究了在 Chromium 內(nèi)核下，使用了 transform 導致內(nèi)部文本模糊的現(xiàn)象，并且給出了一些可嘗試的解決方案，實際遇到，需要多加調(diào)試，嘗試最優(yōu)的解決方案。

最后

好了，本文到此結(jié)束，希望本文對你有所幫助 :)

參考資料

[1]Chromium Bugs -- Issue 521364: Transformed text at fractional offsets is very blurry.: https://bugs.chromium.org/p/chromium/issues/detail?id=521364

[2]Serious bug: Slick Slider turns off subpixel font rendering on the entire site in Chrome #2275: https://github.com/kenwheeler/slick/issues/2275

[3]Github -- iCSS: https://github.com/chokcoco/iCSS