Estoy tratando de rotar una simple línea de texto en algunos grados con la propiedad CSS3 "rotar", precisamente en 1.5 grados.

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

El resultado en Chrome (v18) se ve bien, en Firefox (v10) y Safari (5.1.5), sin embargo, estoy obteniendo resultados feos.

Estoy usando una fuente implementada con @ font-face, pero con Arial todavía tengo problemas (al menos en Firefox). Vea los ejemplos a continuación.

Lo que es realmente extraño es que cambiar a una fuente del sistema (Arial) en Safari resuelve el problema, mientras que en Firefox el problema persiste.

Cualquier ayuda, solución o hackeo sería muy apreciada.

1) Chrome 18 / font-family: Calibri / alineación OK

2) Firefox 10 / font-family: Calibri / alineación fea

3) Firefox 10 / font-family: Arial / alineación sigue siendo feo

4) Safari 5.1.5 / font-family: Calibri / alineación fea

5) Safari 5.1.5 / font-family: Arial / alineación OK

Hasta ahora, he encontrado los siguientes subprocesos, pero ninguno de ellos da una explicación sobre cómo resolver el problema:

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

Errores de CSS3: problemas al usar transformar: reglas de rotación (Safari + Firefox)

CSS Transformar Rotar alineación de letras

También he intentado configurar las variables de DirectWrite (para cambiar la representación de la fuente), como se describe en este tutorial:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , pero los resultados son los mismos.