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%, 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);
}

---

尝试使用webkit触发CSS 3d转换模式。这将更改chrome渲染的方式

-webkit变换：旋转（.7度）平移3d（0,0,0）；

---

编辑 还有一个仅适用于Webkit的样式声明

-Webkit字体平滑

，它接受值

• none

• 亚像素抗锯齿

• 抗锯齿

其中，

亚像素抗锯齿

是默认值

唉，对于旋转文本来说，亚像素反别名不是一个好的解决方案。渲染机无法处理这个问题。3d变换将切换到刚刚消除锯齿的

。但我们可以尝试直接设置它

请参见此处
字体模糊是由于webkit背面可见性问题引起的。我花了很长时间才弄明白这一点，但我还没有在网络上的其他地方看到它

我现在添加-webkit背面可见性：隐藏；将我的网站主体作为CSS重置样式。看着它在你的整个网站上锐化字体，真是太神奇了。你知道转换不是3d的，所以这不会影响任何东西，但是如果你决定在网站上的其他地方进行3d转换，只需添加back-webkit backface visibility:visible；到特定的元素。也应该修复闪烁。
字体似乎是抗锯齿的，但在应用转换之前。转换似乎不起作用。你试过把它旋转一点而不仅仅是0.7度吗？其他人似乎也有一些类似的问题，不幸的是，改变轮换并没有什么作用。这种影响仍然存在，我认为我们对此无能为力。尝试使用黑色的粗体或不粗体字体，可能会在文本元素中添加背景色。translate3d方法对我很有效，但它会使文本模糊一点。但是，直接编辑-webkit字体平滑属性对我不起作用。这种方法确实牺牲了文本的简洁性，但总的来说，我认为它看起来比不可靠的文本要好。不要这样做。有效的做法是在整个页面上激活
-webkit字体平滑：抗锯齿
，这实际上是默认的
-webkit字体平滑：亚像素渲染
的一步。我明白你的意思，但是明显的效果好得令人难以置信。移动设备无论如何都不使用亚像素渲染，因此这不会影响它们。这也修复了闪烁，这是一个巨大的问题，在我看来，这是你无法忍受的。你能建议一个更好的方法来停止闪烁并正确呈现字体吗？此外，您可以明确定义-webkit字体平滑：亚像素渲染；也许你应该发布一个包含这些要点的新问题，这样就可以单独回答，我认为这里的评论与这些问题无关。也许，但我相信现在访问此问题的用户也会想知道答案。你没有提供任何解决问题的方法，只是说我的方法不正确。此外，亚像素渲染的情况仍然是一个意见问题。许多浏览器和操作系统都会使用亚像素渲染，这会影响设计。在css转换期间，亚像素渲染也会自动关闭，从而导致各种问题。随着css转换在今天的开发中的普及，我看到了一个使用抗锯齿渲染的强有力的例子。这似乎对我来说是可行的。当页面应用于特定的动画元素时，我没有看到页面其余部分的文本呈现有任何变化。