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

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

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

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

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

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

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

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

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

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

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

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

這里有個(gè)簡(jiǎn)單的示意：

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

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

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

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

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

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

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

那么，為何會(huì)發(fā)生這種現(xiàn)象?針對(duì)這個(gè)問(wèn)題，沒(méi)有找到特別官方的回答，普遍的認(rèn)為是因?yàn)椋?/p>

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

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

• 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]

如何解決?

那么針對(duì)這個(gè)問(wèn)題，我們?cè)撊绾谓鉀Q呢?社區(qū)里給出的一種方案：

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

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

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

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

3.棄用 transform

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

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

最后

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

參考資料

[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