變換在Firefox中創建波形文本

民間，我有轉換文本的div：rotate（3deg）。在Firefox中，文本呈現波浪狀。去除div的變換可以修復波紋。我有沒有辦法讓我的蛋糕吃呢？變換在Firefox中創建波形文本

HTML：

<div class="card turn-right"> 
    <div class="card-text"> 
     <p>Blah. Blah. Blah.</p> 
    </div> 
</div>

CSS：

.card { 
    display: block; 
    width: 550px; 
    height: 375px; 
} 
.turn-right { 
    -webkit-transform: rotate(3deg); 
     -moz-transform: rotate(3deg); 
     -ms-transform: rotate(3deg); 
     -o-transform: rotate(3deg); 
      transform: rotate(3deg); 
}

編輯：

其他信息：我必須使用@字體面爲這個項目。

截圖：

Screenshot

來源

2013-12-11 Kyle Shevlin

參見http://stackoverflow.com/questions/8605194/improve-css3-text-rotation-quality –

@MattGibson看到了，試過了，沒有解決我的問題。 –

我不認爲你的問題可以修復，但遺憾的是，至少不是在Firefox中。看起來像是字體渲染中存在着突出的錯誤。 [This page]（http://www.panic.com/~cabel/firefox-bug.html）顯示了同樣的問題，在[this bug]中引用（https://bugzilla.mozilla.org/show_bug.cgi？ ID = 534064）在2009年提出... –

嘗試增加的角度

.turn-right { 
    -webkit-transform: perspective(9999px) rotate(3deg); 
      transform: perspective(9999px) rotate(3deg); 
}

無需在現代瀏覽器

順便說-moz-變換，同樣的錯誤出現在webkit瀏覽器中。

爲什麼這樣嗎？

我沒有真正的答案，因爲我沒有瀏覽器的源代碼。但我的猜測是以下。瀏覽器有一個非常好的渲染引擎，可以做很多事情，並做得很好。但是做這一切大部分時間都很昂貴（閱讀：使得瀏覽器變得很慢）。所以，大部分時間都在猜測：這真的有必要嗎？我真的需要計算zzzz中的yyyy的xxxx來顯示它嗎？

而一些錯誤來自於猜測錯誤，並忽略了必要的微積分。

然後，解決方案就是讓瀏覽器呈現引擎思考「等待，我真的需要計算出來，這並非易事」。

此外，在該線像translate3d（0,0,0）或translateZ（0）或背面能見度隱藏修復。翻譯0px的東西有什麼意義？他們強迫瀏覽器以一種複雜的方式而不是簡單的方式來做一些事情，並且解決 - 優化結果。

來源

2013-12-11 21:52:40 vals

這似乎使問題好得多。也許這只是我的眼睛，但我覺得仍然有一點波紋，但它非常清晰，幾乎完美。謝謝。 –

是的，還有一點波紋。我知道讓它看起來更好的唯一方法是增加角度。旋轉（6deg）看起來比旋轉（3deg）好。 – vals

客戶很滿意，所以這讓我很開心。出於好奇，爲什麼這樣工作？這對我來說似乎不是一個明顯的解決方案。 –

變換在Firefox中創建波形文本

回答

相關問題