在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的样式声明-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;对具体要素。还应该修复闪烁。