使用@ font-face将CSS变换旋转应用于元素

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 with rotate以及其他一些漂亮的CSS3效果。

Answer 2

将这些样式添加到<h1>元素：

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