CSS3 rotate - rendering-Probleme in Firefox und Safari

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

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

Das Ergebnis in Chrome (v18) sucht OK,
in Firefox (Version 10) und Safari (5.1.5) aber ich bin immer hässlich Ergebnisse.

Ich verwende einen font umgesetzt mit @font-face, aber mit Arial bekomme ich noch Probleme (zumindest in Firefox). Siehe Beispiele unten.

Was ist wirklich seltsam ist, dass der Wechsel auf eine system-schriftart (Arial) in Safari das problem behebt, während im Firefox das problem weiterhin besteht.

Jede Hilfe, workaround oder hack würde sehr geschätzt werden.

1) Chrom 18 /font-family: Calibri /Ausrichtung OK

CSS3 rotate - rendering-Probleme in Firefox und Safari

2) Firefox-10 /font-family: Calibri /Ausrichtung hässlich

CSS3 rotate - rendering-Probleme in Firefox und Safari

3) Firefox-10 /font-family: Arial /Ausrichtung noch hässlich

CSS3 rotate - rendering-Probleme in Firefox und Safari

4), Safari 5.1.5 /font-family: Calibri /Ausrichtung hässlich

CSS3 rotate - rendering-Probleme in Firefox und Safari

5), Safari 5.1.5 /font-family: Arial /Ausrichtung OK

CSS3 rotate - rendering-Probleme in Firefox und Safari

So weit, ich habe die folgenden threads,
aber keiner von Ihnen gibt eine Erklärung, wie das problem zu lösen:

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

CSS3-Bugs - Probleme bei der Nutzung von verwandeln:drehen Regeln (Safari + Firefox)

CSS Transform Rotate Brief-Ausrichtung

Ich habe auch versucht, die Einstellung der DirectWrite-Variablen (ändern der schriftart-rendering), 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.

Schreibe einen Kommentar