css - CSS 文本转换问题

Question

这个问题在这里被问了很多次，但我还没有找到一个很好的解决方案。一些人建议添加 backface-visibility: hidden 并带有所有前缀的偏角，但对我来说并没有解决问题，也没有建议使用 font-smoothing: antialiased 他欺骗了。我在问是否有人最近想出了如何以一种漂亮的方式呈现 CSS 旋转文本，而文本似乎没有被破坏。

http://jsfiddle.net/pBtEW/10/

<div>
    <p class="rotated">this text is rotated</p>
    <p class="notrotated">this text is not rotated</p>
</div>
<input type="submit" id="submit1" class="rotated"/><br/>
<input type="submit" id="submit2" class="notrotated"/>

.rotated {
    transform:rotate(-4deg);
    -moz-transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    -o-transform:rotate(-4deg);
    -ms-transform:rotate(-4deg);
}

非常感谢您的帮助。

Answer 1

在我的网站上使用 315 度旋转文本，我使用 font-family:courier 和 line-height:100% 和 font-style:normal 作为我的目的可接受的跨浏览器解决方案。第二个最佳解决方案（文本在 IE 和 Mozilla 上完美呈现，但在 Chrome 中不完美）是不设置字体系列。