小编Amb*_*ber的帖子

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

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

-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);
Run Code Online (Sandbox Code Playgroud)

它并没有解决问题..

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

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

我希望有人可以帮助我,或者给我一个解释是什么问题.

css text google-chrome transform rotation

12
推荐指数
4
解决办法
2万
查看次数

标签 统计

css ×1

google-chrome ×1

rotation ×1

text ×1

transform ×1