在Chrome中使用webkit-transform旋转时，文字消除锯齿 [英] Wonky text anti-aliasing when rotating with webkit-transform in Chrome

问题描述

我使用 -webkit-transform：rotate（）旋转元素，并在Chrome 14.0.835.2 dev-m它做了一些很奇怪的东西，元素。它让我想起当你使用平滑消除锯齿而不是清脆旋转文本时，你在Photoshop中得到的类似效果。

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或Chrome版本或有我可以做的来解决它吗？ （它也不是列表元素之间的边界的反锯齿）

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)

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

推荐答案

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

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

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

---

编辑

还有一个Webkit唯一的样式声明 -webkit-font-smoothing ，它取值

• none


• 子像素抗锯齿 / li>
  
• 抗锯齿

• none
• subpixel-antialiased
• antialiased

c $ c>子像素抗锯齿是默认值。

where subpixel-antialiased is the default value.

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

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.

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

这篇关于在Chrome中使用webkit-transform旋转时，文字消除锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！