在Chrome中使用webkit-transform旋转时,文本消除锯齿功能

Question

我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m 旋转一个元素,它正在为元素内部的文本做一些非常奇怪的事情.这让我想起了当您使用"平滑"抗锯齿而不是"清晰"旋转文本时,您在Photoshop中获得的类似效果.

谁知道这里发生了什么？它是针对此webkit或Chrome版本的,还是我可以做些什么来修复它？(它也不是列表元素之间边界的抗锯齿)

这是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);
}

Answer 1

尝试使用webkit触发CSS 3d Transform模式.这会改变chrome呈现的方式

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

编辑

还有一个Webkit only样式声明-webkit-font-smoothing,它接受值

• none
• subpixel-antialiased
• antialiased

其中subpixel-antialiased是默认值.

唉,亚像素抗锯齿不是旋转文本的好方法.渲染机无法处理.3d变换切换到正好antialiased.但我们可以尝试直接设置它.

请参见http://maxvoltar.com/archive/-webkit-font-smoothing

Answer 2

模糊的字体是由一个奇怪的webkit问题引起的--webkit-backface-visibility引起的.这让我想起了,我还没有在网上的任何其他地方看到它.

我现在添加-webkit-backface-visibility:hidden; 作为CSS重置样式到我的网站的主体.观看它锐化整个网站上的字体,令人惊叹.你的转换不是3d,所以这不会影响任何事情,但是如果你决定在你网站的其他地方进行3d转换,只需添加回-webkit-backface-visibility:visible; 对具体要素.还应该修复闪烁.