CSS 在 Chrome 中使用 webkit-transform 旋转时，文本抗锯齿效果不佳
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6846953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wonky text anti-aliasing when rotating with webkit-transform in Chrome
提问by Rahul
I'm rotating an element using -webkit-transform: rotate()and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m旋转一个元素，它对元素内的文本做了一些非常奇怪的事情。它让我想起了在 Photoshop 中使用“平滑”抗锯齿而不是“清晰”旋转文本时获得的类似效果。
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
有谁知道这里发生了什么？它是否特定于此 webkit 或 Chrome 版本，或者我可以做些什么来修复它？（它也不是抗锯齿列表元素之间的边界）
Here's the CSS:
这是CSS：
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
回答by yunzen
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
尝试使用 webkit 触发 CSS 3d 转换模式。这改变了 chrome 渲染的方式
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
编辑
There also a Webkit only style declaration -webkit-font-smoothingwhich takes the values
还有一个 Webkit only 样式声明-webkit-font-smoothing，它采用值
nonesubpixel-antialiasedantialiased
nonesubpixel-antialiasedantialiased
where subpixel-antialiasedis the default value.
subpixel-antialiased默认值在哪里。
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
唉，亚像素抗锯齿不是旋转文本的好解决方案。渲染机无法处理。3d 变换切换到仅antialiased。但是我们可以尝试直接设置。
See here http://maxvoltar.com/archive/-webkit-font-smoothing
回答by DMTintner
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
模糊的字体是由一个奇怪的 webkit 问题引起的，包括 -webkit-backface-visibility。这让我花了很长时间才弄明白，我还没有在网络上的其他任何地方看到它。
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.
我现在添加 -webkit-backface-visibility: hidden; 到我网站的正文作为 CSS 重置样式。观看它锐化整个网站上的字体，这太棒了。你的转换不是 3d 的，所以无论如何这都不会影响任何东西，但是如果你决定在你网站的其他地方做 3d 转换，只需添加 back -webkit-backface-visibility:visibility; 到特定元素。也应该修复闪烁。
