Estou tentando rotacionar uma simples linha de texto em alguns graus com a propriedade CSS3 »girar«, precisamente em 1,5 graus.

<code>  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
</code>

O resultado no Chrome (v18) está parecendo OK, no Firefox (v10) e Safari (5.1.5), no entanto, estou obtendo resultados desagradáveis.

Eu estou usando uma fonte implementada com @ font-face, mas com Arial eu ainda recebo problemas (pelo menos no Firefox). Veja os exemplos abaixo.

O que é realmente estranho é que mudar para uma fonte do sistema (Arial) no Safari resolve o problema, enquanto no Firefox o problema persiste.

Qualquer ajuda, solução alternativa ou hack seria muito apreciada.

1) Chrome 18 / font-family: Calibri / alinhamento OK

2) Firefox 10 / font-family: Calibri / alinhamento feio

3) Firefox 10 / font-family: Arial / alinhamento ainda feio

4) Safari 5.1.5 / font-family: Calibri / alinhamento feio

5) Safari 5.1.5 / font-family: Arial / alinhamento OK

Até agora, encontrei os seguintes tópicos, mas nenhum deles explica como resolver o problema:

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

Bugs CSS3 - Problemas ao usar a transformação: girar regras (Safari + Firefox)

CSS Transform Rotate Letter Alinhamento

Também tentei definir as variáveis ​​DirectWrite (para alterar a renderização da fonte), conforme descrito neste tutorial:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , mas os resultados são os mesmos.