CSS3旋轉 - 在Firefox和Safari的渲染問題

我想旋轉一段簡單的文本，CSS3屬性»旋轉«，精確到1.5度。CSS3旋轉 - 在Firefox和Safari的渲染問題

-webkit-transform: rotate(1.5deg); 
    -moz-transform: rotate(1.5deg); 
    -ms-transform: rotate(1.5deg); 
    -o-transform: rotate(1.5deg); 
    transform: rotate(1.5deg);

結果在Chrome（V18）正在尋找OK，在Firefox（V10）和Safari（5.1.5），但是我越來越難看的結果。

我正在使用@ font-face實現的字體，但是Arial仍然出現問題（至少在Firefox中）。看下面的例子。

真正奇怪的是，在Safari中切換到系統字體（Arial）可以解決問題，而在Firefox中，問題仍然存在。

任何幫助，解決方法或黑客將不勝感激。

1）鍍18 /字體家庭：宋體/對齊行

2）火狐10 /字體家庭：宋體/對齊難看

3）火狐10 /字體-family：宋體/對準仍然難看

4）的Safari 5.1.5 /字體家庭：宋體/對齊難看

5）的Safari 5.1.5 /字體-family：宋體/對齊確定

到目前爲止，我發現下面的線程，但他們沒有就如何解決這個問題的解釋：

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

CSS Transform Rotate letter alignment

我也曾嘗試設置的DirectWrite變量（改變字體渲染），如在本教程中描述：http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/，但結果是相同的。

來源

2012-05-04 Marcel Kalveram

這是不是你可以修復的東西，從bug報告和其他一些看起來像瀏覽器製造商都知道這些問題..但我不會堅持一段時間的永久修復。

也許嘗試把文本放在它自己的div容器中，並直接旋轉而不是文本？

但恕我直言，如果你需要這個工作在生產網站上，用圖像替換文字。用戶使用的瀏覽器不支持新CSS3的東西，所以如果它很重要，不要使用它，或確保它降級很好（適用於所有平臺，但可能會鬆動一些時髦），即禁用瀏覽器上的文本旋轉看起來很醜。

來源

2012-05-04 23:01:31 wjdp

「用戶正在使用不支持新CSS3內容的瀏覽器」 - 大量泛化，大部分情況並非如此 – Alex

CSS3旋轉 - 在Firefox和Safari的渲染問題

回答

相關問題