变换模糊文本:在 Chrome 中旋转

Blurry text on transform:rotate in Chrome(变换模糊文本:在 Chrome 中旋转)

问题描述

我正在构建一个带有旋转的包装 div (transform:rotate(10deg)) 的网站.div 内的文本也会旋转.我希望文本是直的，所以我将它旋转回来(transform:rotate(-10deg)).文本又是直的，但这会导致 Chrome(最新版本，mac)中的文本模糊.我试过了:

I'm building a website with a wrapper div that is rotated (transform:rotate(10deg)). The text inside the div also rotates. I want the text straight, so I rotate it back (transform:rotate(-10deg)). The text is straight again, but this causes blurry text in Chrome (latest version, mac). I tried:

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-font-smoothing: antialiased; (and other)
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateZ(0deg);

这并没有解决问题..

JSFiddle:http://jsfiddle.net/D69d4/10/

奇怪的是:它在 jsfiddle 中完美运行.但在实际网站上却不行.当我在我的样式中添加 -webkit-backface-visibility: hidden; 时，Safari 中的模糊文本再次变得清晰，但在 Chrome 中没有区别.(我几乎认为它在 Chrome 中变得更糟)(FF 工作正常)

The weird thing is: it works perfectly in the jsfiddle.. But not on the actual website. When I add -webkit-backface-visibility: hidden; inside my style, the blurry text in Safari turns out sharp again, but in Chrome there is no difference. (I almost think it is making it worse in Chrome) (FF works fine)

我希望有人能帮我解决这个问题，或者给我一个解释是怎么回事.

I hope someone can help me with this, or give me a explanation what is going wrong.

推荐答案

它发生在 Chrome 和 Safari 等 Webkit 浏览器中.尝试添加:

It happens in Webkit browsers such as Chrome and Safari. Try adding:

-webkit-transform-origin: 50%  51%;

你会没事的.

这篇关于变换模糊文本:在 Chrome 中旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！