CSS3旋转 - Firefox和Safari中的渲染问题 [英] CSS3 rotate - rendering problems in Firefox and Safari

问题描述

<$ p $

我试图用CSS3属性»rotate«，
旋转一个简单的文本行一些度数。 p> -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）中显示正常，

我使用的是使用@ font-face实现的字体，但是Arial i仍然遇到问题（至少在Firefox中）。

真正奇怪的是，在Safari中切换到系统字体（Arial）解决了问题，而在Firefox中问题仍然存在。

$

1）Chrome 18 / font-family：Calibri /比对OK

2）Firefox 10 / font-family：Calibri / alignment ugly

3）Firefox 10 / font-family： Arial / alignment is unugly

4）Safari 5.1.5 / font-family：Calibri / alignment丑陋

5）Safari 5.1 .5 / font-family：Arial / alignment OK

到目前为止，我发现了以下线程
，但是没有一个解释如何解决这个问题： / p>

https：// bugzilla。 mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - 使用transform时出现的问题：旋转规则（Safari和Firefox）

CSS变换旋转字母对齐

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

解决方案

这不是你可以修复的，从错误报告和其他位它看起来像浏览器制造商都知道这些问题..但我不会持久的永久修复一段时间。

也许尝试把文本自己的div容器，并旋转而不是直接的文本？

但是，如果你需要这个在一个生产站点上工作，用图像替换文本。用户使用的浏览器不支持新的CSS3的东西，所以如果重要的是不使用它，或者确保它很好地降低（在所有平台上的功能，但可能会松动一些snazz），即禁用文本旋转浏览器，看起来很丑陋。

I'm trying to rotate a simple line of text by some degrees with the CSS3 property »rotate«, precisely by 1.5 degrees.

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);

The result in Chrome (v18) is looking OK, in Firefox (v10) and Safari (5.1.5) however I am getting ugly results.

I am using a font implemented with @font-face, but with Arial i still get problems (at least in Firefox). See examples below.

What's really weird is that switching to a system font (Arial) in Safari resolves the problem, while in Firefox the problem persists.

Any help, workaround or hack would be greatly appreciated.

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

So far, I have found the following threads, but none of them gives an explanation on how to solve the problem:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3 Bugs - Issues when using transform:rotate rules (Safari + Firefox)

CSS Transform Rotate letter alignment

I have also tried setting the DirectWrite variables (to change font rendering), as described in this tutorial: http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , but the results are the same.

解决方案

This isn't something that you can fix, from the bug report and other bits it looks like the browser makers are aware of these problems.. but I wouldn't hold out for a permanent fix for a while.

Maybe try putting the text in its own div container and rotating that instead of the text directly?

But IMHO if you need this to work on a production site, replace the text with an image. Users are using browsers that don't support the new CSS3 stuff so if it's important either don't use it, or ensure it degrades nicely (functional on all platforms, but may loose some snazz) ie disable the text rotation on the browsers that look ugly.

这篇关于CSS3旋转 - Firefox和Safari中的渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！