Применение поворота CSS-преобразования к элементу с помощью @ font-face

Question

Я пытаюсь применить правило преобразования к некоторым элементам, которые также имеют применимый к ним шрифт @font-face.

h1 { 
    -webkit-transform: rotate(-1deg); 
    -moz-transform: rotate(-1deg); 
    -o-transform: rotate(-1deg); 
    transform: rotate(-1deg); 
} 

Когда это преобразование правило применяется, я получаю вращение я после, но текст не отображается правильно - хотя он поворачивается, это как будто каждый символ связан с происхождением, который сидит на пиксель , и поэтому строка текста выглядит зубчатой.

Если я просто заменил шрифт системным шрифтом, проблема исчезнет, ​​так что это будет связано с использованием @font-face. Я тестировал его в различных браузерах на OS X и Windows, и все они показывают похожие результаты.

Неужели кто-нибудь сталкивался с этой проблемой раньше или кто-нибудь может дать какие-либо советы о том, почему это может произойти?

Answer 1

Проверьте источник этого experiment.

Он использует @ font-face с поворотным, а также некоторые другие отличные эффекты CSS3.

Answer 2

Добавьте эти стили <h1> элемента:

-webkit-backface-vivbility: hidden; 
-webkit-transform: translate3d(0,0,0); 
-webkit-transform-style: preserve-3d;