小编典典

在Chrome中使用webkit-transform旋转时出现奇特的文字抗锯齿

css

我使用旋转元素,-webkit-transform: rotate()而在Chrome14.0.835.2dev-m中,它对元素内部的文本确实做了一些奇怪的事情。它使我想起了使用“平滑”抗锯齿而不是“清晰”旋转文本时在Photoshop中获得的类似效果。

有人知道这是怎么回事吗?它特定于此Webkit或Chrome版本,还是可以解决此问题?(这也不是消除列表元素之间边界的锯齿)

Here’s the 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);
}

阅读 294

收藏
2020-05-16

共1个答案

小编典典

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

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

edit

There also a Webkit only style declaration -webkit-font-smoothing which
takes the values

  • none
  • subpixel-antialiased
  • antialiased

where subpixel-antialiased 默认值在哪里.

,,子像素抗锯齿不是旋转文本的好方法。该渲染机器不能处理的。3d转换切换为justantialiased。但是我们可以尝试直接设置它。

2020-05-16