CSS差呈現在translateZ（）與規模（）

Question

我注意到，有一個很大的質量差異在這2種方式轉換文本時：

.text1 { 
 
    width: 200px; 
 
    height: 22px; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(2); /* here */ 
 
    color: red; 
 
    text-align: center; 
 
    font-size: 22px; 
 
} 
 
.text2 { 
 
    width: 200px; 
 
    height: 22px; 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: translateZ(400px); /* here */ 
 
    text-align: center; 
 
    font-size: 22px; 
 
} 
 
.perspective { 
 
    width: 200px; 
 
    height: 200px; 
 
    perspective: 800px; 
 
    transform-style: preserve-3d; 
 
}

<div class="perspective"> 
 
    <div class="text1">Text</div> 
 
    <div class="text2">Text</div> 
 
</div>

有沒有辦法迫使在Z軸上移動文本時效果更好？

Answer 1

當你與translateZ(400px)轉化是文本模糊的原因添加字體平滑（用於Firefox），和抗鋸齒這是一個3D轉換;瀏覽器將該元素視爲紋理而不是矢量以提供硬件3D加速。
所以基本上分辨率會隨着尺寸的增加而降低。

另一方面按比例轉換是2D轉換, 瀏覽器將元素視爲向量並且不會發生模糊。

---

只要我們踢在3D看看會發生什麼scale，實際上並沒有設置任何translateZ值：

.text1 { 
 
    width: 200px; 
 
    height: 22px; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: scale(2); 
 
    /* here */ 
 
    color: red; 
 
    text-align: center; 
 
    font-size: 22px; 
 
} 
 
.text1a { 
 
    width: 200px; 
 
    height: 22px; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 50%; 
 
    transform-origin: 50% 50%; 
 
    transform: translateZ(0) scale(2); 
 
    /* here */ 
 
    color: blue; 
 
    text-align: center; 
 
    font-size: 22px; 
 
} 
 
.text2 { 
 
    width: 200px; 
 
    height: 22px; 
 
    position: absolute; 
 
    top: 60%; 
 
    left: 0; 
 
    transform-origin: 50% 50%; 
 
    transform: translateZ(400px); 
 
    /* here */ 
 
    text-align: center; 
 
    font-size: 22px; 
 
} 
 
.perspective { 
 
    width: 200px; 
 
    height: 200px; 
 
    perspective: 800px; 
 
    transform-style: preserve-3d; 
 
}

<div class="perspective"> 
 
    <div class="text1">Text</div> 
 
    <div class="text1a">Text</div> 
 
    <div class="text2">Text</div> 
 
</div>

---

唯一的解決方法我現在可以考慮通過JS檢查樣式表，並用01覆蓋

var styles = document.styleSheets; 

//patterns 
var perspPat = /perspective\s*?:\s*?(\d+)/; 
var transZPat = /translateZ\(\s*?(\d+)/; 

var perspective; 
var translateZ = []; 
[].slice.call(styles).forEach(function (x) { 
    [].slice.call(x.rules).forEach(function (rule) { 
     if (perspPat.test(rule.cssText)) { 
      perspective = perspPat.exec(rule.cssText)[1] 
     }; 
     if (transZPat.test(rule.cssText)) { 
      translateZ.push([ 
      rule.selectorText, 
      transZPat.exec(rule.cssText)[1]]); 
     } 


    }); 

}) 


translateZ.forEach(function (x) { 
    document.querySelector(x[0]).style.transform = 'scale(' + perspective/x[1] + ')'; 

}) 

fiddle

正如你所看到的，即使它的工作，需要大量的優化.. （我不認爲它的生產準備在它的當前狀態）。

Answer 2

可以爲WebKit的

.text2 { 
    -webkit-font-smoothing: antialiased; 
    font-smooth: always; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

http://davidwalsh.name/font-smoothing