CSS3旋轉 - 在Firefox和Safari中呈現問題

Question

我正在嘗試使用CSS3屬性»旋轉«旋轉一段簡單的文本，精確度為1.5度。

  -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）的結果看起來不錯，在Firefox（v10）和Safari（5.1.5）中，但是我的結果很難看。

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

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

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

1）Chrome 18 / font-family：Calibri / alignment OK

2）Firefox 10 / font-family：Calibri / alignment丑陋

3）Firefox 10 / font-family：Arial / alignment仍然很難看

4）Safari 5.1.5 / font-family：Calibri / alignment丑陋

5）Safari 5.1.5 / font-family：Arial / alignment OK

到目前為止，我已經找到了以下線程，但沒有一個給出如何解決問題的解釋：

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

CSS3錯誤 - 使用轉換時的問題：旋轉規則（Safari + Firefox）

CSS變換旋轉字母對齊

我也嘗試過設置DirectWrite變量（以更改字體渲染），如本教程中所述： http ： //www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox / ，但結果是一樣的。

Answer 1

這不是你可以修復的東西，從錯誤報告和瀏覽器制造商看到這些問題的其他位看起來......但我暫時不會堅持永久修復。

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

但恕我直言，如果你需要這個在生產網站上工作，用圖像替換文本。 用戶正在使用不支持新CSS3內容的瀏覽器，所以如果重要的是要么不使用它，要么確保它很好地降級（在所有平台上都可用，但可能會丟失一些snazz），即禁用瀏覽器上的文本輪換看起來很難看