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 / 对齐OK

2) Firefox 10 / font-family: Calibri / 对齐丑陋

3) Firefox 10 / font-family：Arial / 对齐仍然难看

4) Safari 5.1.5 / font-family: Calibri / 对齐丑陋

5) Safari 5.1.5 / font-family: Arial / 对齐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 东西，所以如果它很重要，要么不要使用它，要么确保它很好地降级（在所有平台上都可以使用，但可能会失去一些时髦），即禁用浏览器上的文本旋转看起来很丑。