CSS3 rotar - problemas de representación en Firefox y Safari

Question

Estoy tratando de rotar una línea de texto simple en algunos grados con la propiedad CSS3 »rotar«, con precisión de 1,5 grados.

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

El resultado en Chrome (v18) está buscando bien, en Firefox (v10) y Safari (5.1.5), sin embargo estoy consiguiendo resultados feos.

Estoy usando una fuente implementada con @ font-face, pero con Arial todavía tengo problemas (al menos en Firefox). Ver 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 hack sería muy apreciada.

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

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

3) Firefox 10/font-family: Arial/alignment still feo

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

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

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

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

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

CSS Transform Rotate letter alignment

que también han tratado estableciendo las variables 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.

Answer 1

Esto no es algo que pueda solucionar, a partir del informe de errores y otros bits, parece que los fabricantes de navegadores conocen estos problemas ... pero no aguantaría una solución permanente por un tiempo.

¿Quizás intente poner el texto en su propio contenedor div y rotarlo en lugar del texto directamente?

Pero en mi humilde opinión si necesita que esto funcione en un sitio de producción, reemplace el texto con una imagen. Los usuarios están usando navegadores que no son compatibles con las nuevas funciones de CSS3, por lo que si es importante, no lo utilicen o asegúrense de que se degradan (funcionan en todas las plataformas, pero pueden perder algo de gracia), es decir, deshabilitar la rotación de texto en los navegadores. se ve feo