在 Chrome 中使用 webkit-transform 旋转时，文本抗锯齿效果不稳定

发布于 2024-11-26 12:32:11 字数 943 浏览 1 评论 0原文

我正在使用 -webkit-transform:rotate() 旋转一个元素，在 Chrome 14.0.835.2 dev-m 中，它对元素内的文本做了一些非常奇怪的事情。它让我想起了在 Photoshop 中使用“平滑”抗锯齿而不是“清晰”旋转文本时获得的类似效果。

有人知道这是怎么回事吗？它是特定于这个 webkit 或 Chrome 版本的吗？还是我可以做些什么来修复它？（它也不会消除列表元素之间的边框锯齿）

Wonky text

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

原文

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".

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)

Wonky text

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

橪书 2024-12-03 12:32:11

尝试使用 webkit 触发 CSS 3d 变换模式。的方式

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

这改变了 chrome 渲染编辑

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

none
subpixel-antialiased
< code>antialiased

其中 subpixel-antialiased 是默认值。

唉，子像素抗锯齿对于旋转文本来说并不是一个好的解决方案。渲染机无法处理这个问题。 3d 变换切换为仅抗锯齿。但我们可以尝试直接设置。

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

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

-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 is the default value.

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.

See here http://maxvoltar.com/archive/-webkit-font-smoothing

回复收藏 0 原文

云朵有点甜 2024-12-03 12:32:11

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

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

回复收藏 0 原文

~没有更多了~