在 Chrome 中使用 webkit-transform 旋转时出现不稳定的文本抗锯齿

2022-01-16 00:00:00 webkit rotation css webkit-transform

我正在使用 -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);
}

推荐答案

尝试用 webkit 触发 CSS 3d Transform 模式.这改变了 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 only 样式声明 -webkit-font-smoothing 接受值

  • 无
  • 亚像素抗锯齿
  • 抗锯齿

其中 subpixel-antialiased 是默认值.

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

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

相关文章