32

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

2 回答 2

73

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

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

编辑

还有一个 Webkit only 样式声明-webkit-font-smoothing，它采用值

  • none
  • subpixel-antialiased
  • antialiased

subpixel-antialiased默认值 在哪里。

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

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

于 2011-09-21T08:22:19.173 回答
16

字体模糊是由一个奇怪的 webkit 问题引起的，其中涉及 -webkit-backface-visibility。这花了我很长时间才弄清楚，而且我还没有在网络上的其他任何地方看到它。

我现在添加 -webkit-backface-visibility: hidden; 到我网站的主体作为 CSS 重置样式。观看它锐化整个网站上的字体，这太棒了。您的转换不是 3d 的，所以无论如何这不会影响任何东西，但是如果您决定在站点的其他地方进行 3d 转换，只需添加 back -webkit-backface-visibility: visible; 到特定元素。也应该修复闪烁。

于 2012-12-10T17:08:52.260 回答