将CSS转换旋转应用到使用@ font-face的元素

我一直在尝试将变换规则应用于某些也应用@font-face字体的元素。将CSS转换旋转应用到使用@ font-face的元素

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

当这个变换规则应用，我得到的旋转，我后，但文字显示不正确 - 就好像每个角色绑定到其坐落在一个像素中的原点尽管它旋转时，它的，所以文本的行看起来很锯齿。

如果我只是用系统字体替换字体，问题就消失了，所以看起来与使用@font-face有关。我已经在OS X和Windows上的各种浏览器中测试过它们，并且它们都显示类似的结果。

有没有人遇到过这个问题，或者有人可能会提出任何建议，为什么这可能会发生？

当你说参差不齐的，你的意思是不是抗锯齿？ – 2011-01-25 20:12:39

它被反锯齿，文本正在旋转，但似乎每个字符都锚定在位于像素网格上的原点上。 – 2011-01-26 14:28:48

看看这个experiment的来源。

它使用@ font-face旋转以及一些其他漂亮的CSS3效果。

2011-01-25 22:06:19 Josiah

好的演示Josiah。不幸的是，这并不能帮助我解决这个问题。 – 2011-01-26 16:45:25

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

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

2013-02-17 23:27:26 gregmatys

回答