11

我正在尝试使用 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 错误 - 使用 transform:rotate 规则时的问题 (Safari + Firefox)

CSS变换旋转字母对齐

我还尝试设置 DirectWrite 变量（以更改字体渲染），如本教程中所述：http ://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox /，但结果是一样的。

4

1 回答 1

1

这不是您可以解决的问题，从错误报告和其他位来看，浏览器制造商似乎意识到了这些问题......但我暂时不会坚持永久修复。

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

但是恕我直言，如果您需要在生产站点上使用它，请将文本替换为图像。用户使用的浏览器不支持新的 CSS3 东西，所以如果它很重要，要么不要使用它，要么确保它很好地降级（在所有平台上都可以使用，但可能会失去一些时髦），即禁用浏览器上的文本旋转看起来很丑。

于 2012-05-04T23:01:31.237 回答