使用 @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 上的各种浏览器中对其进行了测试，它们都显示了相似的结果。
以前有人遇到过这个问题吗？或者有人可以就为什么会发生这种情况提供任何建议吗？
I've been trying to apply a transform rule to some elements which also have a @font-face font applied to them.
h1 {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
When this transform rule is applied, I get the rotation I'm after, but the text does not appear correctly — although it's rotated, it's as though each character is bound to an origin which sits on a pixel, and so the line of text looks jagged.
If I simply replace the font with a system font, the problem goes away, so would appear to be related to the use of @font-face. I've tested it in a variety of browsers on OS X and Windows, and they all show similar results.
Has anybody come across this problem before, or can anybody give any advice on why this might be occurring?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
查看此实验的源代码。
它使用@font-face 和旋转以及其他一些漂亮的CSS3 效果。
Check out the source for this experiment.
It uses @font-face with rotate as well as some other nifty CSS3 effects.
将这些样式添加到
元素：Add these styles to
<h1>element: