Próbuję obrócić prosty wiersz tekstu o kilka stopni z właściwością CSS3 »obróć«, dokładnie o 1,5 stopnia.

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

Wynik w Chrome (wersja 18) wygląda dobrze, w Firefoksie (10) i Safari (5.1.5) otrzymuję jednak brzydkie wyniki.

Używam czcionki zaimplementowanej za pomocą @ font-face, ale w przypadku Arial nadal występują problemy (przynajmniej w Firefoksie). Zobacz przykłady poniżej.

Dziwne jest to, że przejście na czcionkę systemową (Arial) w Safari rozwiązuje problem, podczas gdy w Firefoksie problem nadal występuje.

Każda pomoc, obejście lub hack byłby bardzo mile widziane.

1) Chrome 18 / rodzina czcionek: Calibri / wyrównanie OK

2) Firefox 10 / font-family: Calibri / alignment brzydki

3) Firefox 10 / font-family: Arial / alignment wciąż brzydki

4) Safari 5.1.5 / font-family: Calibri / alignment brzydki

5) Safari 5.1.5 / font-family: Arial / alignment OK

Do tej pory znalazłem następujące wątki, ale żaden z nich nie wyjaśnia, jak rozwiązać problem:

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

Błędy CSS3 - problemy podczas używania transformacji: obracanie reguł (Safari + Firefox)

CSS Przekształć Wyrównanie litery

Próbowałem również ustawić zmienne DirectWrite (aby zmienić renderowanie czcionek), jak opisano w tym samouczku:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox/ , ale wyniki są takie same.