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

【问题标题】：Applying CSS transform rotation to an element using @font-face使用 @font-face 将 CSS 变换旋转应用于元素
【发布时间】：2011-01-25 20:10:02
【问题描述】：

我一直在尝试对一些元素应用转换规则，这些元素也应用了@font-face 字体。

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

当应用这个变换规则时，我得到了我想要的旋转，但是文本没有正确显示——虽然它被旋转了，就好像每个字符都绑定到一个像素上的原点，所以文本行看起来参差不齐。

如果我简单地将字体替换为系统字体，问题就会消失，因此似乎与使用@font-face 有关。我已经在 OS X 和 Windows 上的各种浏览器中对其进行了测试，它们都显示出相似的结果。

以前有没有人遇到过这个问题，或者任何人都可以就为什么会发生这种情况提供任何建议？

【问题讨论】：

【解决方案1】：

查看此experiment 的来源。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

1) 错字：webkit-backface-visibility 2) -webkit-transform: translate3d(0,0,0); -webkit-transform 之后：旋转（-1deg）；会覆盖原来的......只需添加 -webkit-transform-style: preserve-3d 到原来的对我来说就是诀窍。