firefox - 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 ugly

3) Firefox 10/font-family: Arial/alignment still ugly

4) Safari 5.1.5/font-family: Calibri/alignment ugly

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 东西的浏览器，所以如果它很重要，要么不要使用它，要么确保它很好地降级(在所有平台上都能正常工作，但可能会失去一些时髦)即禁用浏览器上的文本旋转长得丑。