我正在构建一个带有旋转的包装div的网站(transform:rotate(10deg)). div内的文字也会旋转.我希望文本笔直,所以我将其旋转回来(transform:rotate(-10deg)).文字再次笔直,但这会导致Chrome中的文字模糊(最新版本,mac).我试过了:
-webkit-transform: rotate(.7deg) translate3d( 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工作正常)
我希望有人可以帮助我,或者给我一个解释是什么问题.