建站
咨詢
售后
建站咨詢
新聞中心
正常而言，應該是這樣的：
創(chuàng)新互聯(lián)建站專注于瑪多企業(yè)網站建設,自適應網站建設,商城開發(fā)。瑪多網站建設公司,為瑪多等地區(qū)提供建站服務。全流程按需開發(fā)，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務
emmm，可能大圖不是很明顯，我們取一細節(jié)對比，就非常直觀了：
何時觸發(fā)這種現(xiàn)象?
那么?什么時候會觸發(fā)這種問題呢?在 Google 上，其實我們能搜到非常多類似的案例，總結而言：
1.當文本元素的某個祖先容器存在 transform: translate() 或者 transform: scale() 等 transform 操作時，容易出現(xiàn)這種問題
當然，這只是必要條件，不是充分條件。繼續(xù)深入探究，會發(fā)現(xiàn)，必須還得同時滿足一些其它條件：
2.元素作用了 transform: translate() 或者 transform: scale() 后的計算值產生了非整數(shù)
譬如，上述案例觸發(fā)的 CSS 代碼如下：
.container {
position: absolute;
width: 1104px;
height: 475px;
top: 50%;
transform: translateY(-50%);
// ...
}由于元素的高度為 475px，translateY(-50%) 等于 237.5px，非整數(shù)，才導致了內部的字體模糊。
但是，需要注意的是，并非所有產生的非整數(shù)都會導致了內部的字體模糊。
這里有個簡單的示意：
還是上述的例子，當高度從 477px 一直調整到 469px 的過程中，只有 477px 和 475px 導致了模糊，而 473, 471, 469 則沒有。所以，這也只是引發(fā)模糊的一個必要條件。
3.文本內容是否模糊還與屏幕有關，高清屏(dpr > 2)下不容易觸發(fā)，更多發(fā)生在普通屏幕下(dpr = 1)
在我實測的過程中還發(fā)現(xiàn)，這個現(xiàn)象基本只會發(fā)生在 dpr 為 1 的普通屏幕下。
類似于 MAC 的高清屏幕則不太會觸發(fā)這個問題。
dpr = 物理像素 / 設備獨立像素，表示設備像素比。這個與我們通常說的視網膜屏(多倍屏，Retina屏)有關。設備像素比描述的是未縮放狀態(tài)下，物理像素和設備獨立像素的初始比例關系。
并非所有瀏覽器都是這個表現(xiàn)，基本發(fā)生在 chromium 內核。
為何發(fā)生這種現(xiàn)象呢?
那么，為何會發(fā)生這種現(xiàn)象?針對這個問題，沒有找到特別官方的回答，普遍的認為是因為：
由于瀏覽器將圖層拆分到 GPU 以進行 3D 轉換，而非整數(shù)的像素偏移，使得 Chrome 在字體渲染的時候，不是那么的精確。
關于這個問題，感興趣的可以再看看這兩個討論：
- 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.給元素設置 -webkit-font-smoothing: antialiased
font-smooth CSS 屬性用來控制字體渲染時的平滑效果，該特性是非標準的，我們應該盡量不要在生產環(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 的替代方案的。
總結一下，本文簡單探究了在 Chromium 內核下，使用了 transform 導致內部文本模糊的現(xiàn)象，并且給出了一些可嘗試的解決方案，實際遇到，需要多加調試，嘗試最優(yōu)的解決方案。
最后
好了，本文到此結束，希望本文對你有所幫助 ????
參考資料
[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
本文名稱：疑難雜癥：運用Transform導致文本模糊的現(xiàn)象探究
轉載注明：http://www.5511xx.com/article/cdscopi.html
