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
2) Firefox-10 /font-family: Calibri /Ausrichtung hässlich
3) Firefox-10 /font-family: Arial /Ausrichtung noch hässlich
4), Safari 5.1.5 /font-family: Calibri /Ausrichtung hässlich
5), Safari 5.1.5 /font-family: Arial /Ausrichtung OK
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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist nicht etwas, das Sie beheben können, aus dem bug-report und anderen bits es sieht aus wie die browser-Macher sind sich bewusst von diesen Problemen.. aber ich würde nicht halten Sie sich für eine dauerhafte Lösung für eine Weile.
Vielleicht versuchen, den text in ein eigenes div-container und drehen, dass statt den text direkt?
Aber IMHO, wenn Sie dies brauchen, um arbeiten an einem Produktionsstandort, ersetzen Sie den text mit einem Bild. Nutzer sind mit Browser, die keine Unterstützung der neuen CSS3-Sachen, also wenn es wichtig ist, entweder nicht verwenden, oder stellen Sie sicher es baut schön (funktionsfähig auf allen Plattformen, kann aber Locker einige snazz) ie deaktivieren Sie die text-rotation auf den Browsern, die hässlich Aussehen.