Ich versuche, eine einfache Textzeile mit der CSS3-Eigenschaft »rotate« um einige Grad zu drehen, genau um 1,5 Grad.

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

Das Ergebnis in Chrome (v18) sieht in Ordnung aus, in Firefox (v10) und Safari (5.1.5) erhalte ich jedoch hässliche Ergebnisse.

Ich verwende eine Schriftart, die mit @ font-face implementiert wurde, aber mit Arial bekomme ich immer noch Probleme (zumindest in Firefox). Siehe Beispiele unten.

Was wirklich seltsam ist, ist, dass der Wechsel zu einer Systemschriftart (Arial) in Safari das Problem löst, während das Problem in Firefox weiterhin besteht.

Jede Hilfe, Problemumgehung oder Hack wäre sehr dankbar.

1) Chrome 18 / Schriftfamilie: Calibri / Ausrichtung OK

2) Firefox 10 / Schriftfamilie: Calibri / Ausrichtung hässlich

3) Firefox 10 / Schriftfamilie: Arial / Ausrichtung immer noch hässlich

4) Safari 5.1.5 / Schriftfamilie: Calibri / Ausrichtung hässlich

5) Safari 5.1.5 / Schriftfamilie: Arial / Ausrichtung OK

Bisher habe ich die folgenden Threads gefunden, aber keiner von ihnen gibt eine Erklärung zur Lösung des Problems:

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

CSS3 Bugs - Probleme beim Verwenden von transform: rotate rules (Safari + Firefox)

CSS-Transformation Buchstabenausrichtung drehen

Ich habe auch versucht, die DirectWrite-Variablen festzulegen (um die Schriftwiedergabe zu ändern), wie in diesem Tutorial beschrieben:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , aber die Ergebnisse sind die gleichen.