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 内容，所以如果它很重要，要么不要使用它，要么确保它能很好地降级（在所有平台上都可用，但可能会失去一些时髦），即禁用浏览器上的文本旋转看起来很难看。