CSS 文本转换问题

Question

这个问题在这里已经被问过很多次了，但我还没有找到解决问题的好办法。一些人建议添加背面可见性:隐藏所有前缀的偏 Angular ，但没有解决我的问题，也没有解决使用字体平滑的建议:他骗了抗锯齿。我想问是否有人最近想出如何以漂亮的方式呈现 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 with line-height:100% 和 font-style:normal 作为可接受的跨浏览器解决方案。第二个最佳解决方案(文本在 IE 和 Mozilla 上完美呈现但在 Chrome 中不完美)是不设置字体系列。