CSS3旋转 - 在Firefox和Safari中呈现问题

Question

我正在尝试使用CSS3属性»rotate«旋转一段简单的文本行， 精确到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 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/，但结果是一样的。

Answer 1

这不是你可以修复的东西，从错误报告和浏览器制造商看到这些问题的其他位看起来......但是我暂时不会坚持永久修复。

也许尝试将文本放在自己的div容器中并直接旋转而不是文本？

但恕我直言，如果你需要这个在生产网站上工作，用图像替换文本。用户正在使用不支持新CSS3内容的浏览器，所以如果重要的是要么不使用它，要么确保它很好地降级（在所有平台上都可以运行，但可能会丢失一些snazz），即禁用浏览器上的文本轮换看起来很难看。