css – 在Chrome中使用webkit-transform旋转时的粗糙文本消除锯齿

我使用-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%,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,.3),12px 12px 5px rgba(90,.1);
}

解决方法

尝试使用webkit触发CSS 3d变换模式。这改变了chrome呈现的方式

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

编辑

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

> none
>子像素抗锯齿
>抗锯齿

其中子像素抗锯齿是默认值。

唉，子像素抗锯齿对旋转文本没有好的解决方案。渲染机不能处理。 3d变换切换到刚刚抗锯齿。但我们可以尝试直接设置它。

见这里http://maxvoltar.com/archive/-webkit-font-smoothing