-webkit-transform CSS 属性软管字体渲染
这个问题与这个问题几乎相同只是我只在 Mac 上的 Safari 中看到它（我需要关心的唯一平台）。它绝对与 CSS 相关，我想我已经将其范围缩小到了几个似乎对文本渲染方式造成严重破坏的属性。它们是：
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-perspective: 2500;
一旦我禁用这些（通过在它们前面加上“x”前缀，例如x-webkit-*），文本就会呈现良好。启用其中任何一个都会导致文本中断。以下是一些屏幕截图，可以帮助直观地看出差异。
http://s3.amazonaws.com/codaset/ticket/6404/ 665/good.png http://s3.amazonaws .com/codaset/ticket/6404/666/bad.png
有谁知道可能导致此问题的原因或是否/如何修复它？谷歌并没有提供太大帮助。
谢谢。
This question is pretty much the same as this one except that I'm seeing it exclusively in Safari on Mac (the only platform I need to care about). It's definitely CSS-related and I think I've narrowed it down to a few properties which seem to wreak havoc on the way text is rendered. They are:
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-webkit-perspective: 2500;
As soon as I disable these (by prefixing them with an "x", e.g. x-webkit-*), the text renders fine. Enabling any one of them results in the borked text. Here are a couple of screenshots that may help visualize the difference.
http://s3.amazonaws.com/codaset/ticket/6404/665/good.png http://s3.amazonaws.com/codaset/ticket/6404/666/bad.png
Does anyone have any idea what might be causing this or if/how it can be fixed? Google hasn't been terribly helpful.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为这实际上可以通过使用
-webkit-font-smoothing: antialiased在以后的 iOS 版本（我相信 3.2 和 4.0）中修复。注意：锯齿仍然会有所不同，但如果是动画的话，看起来会不那么尴尬。I think this is actually possible to fix in later iOS revisions (I believe 3.2 & 4.0) by using
-webkit-font-smoothing: antialiased. Note: The aliasing will still be different, but will look less awkward if it's animated.Safari 中的转换是硬件加速的。它可以提供更好的速度，但渲染不遵循相同的管道，并且会损失一些质量。除了不使用转换之外，您对此无能为力。 :/
Transforms in Safari are hardware-accelerated. It allows for much better speed, but the rendering doesn't follow the same pipeline, and some quality is lost. There's nothing you can do about it, except not use transforms. :/
今天遇到这个问题，不得不使用
transform:scale(1.1)translate3d(0,0,0);(http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ ）使其正常工作。Came across this issue today and had to use
transform: scale(1.1) translate3d(0,0,0);(http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/) to get it working.