CSS text transform problems

Question

This question has been asked many times here but i haven't found a good solution to the problem. Some suggested to add backface-visibility: hidden with all the declination of prefixes but has not solved the problem for me nor the suggestion to use font-smoothing: antialiased did he trick. I'm asking if someone has recently figured it out how to render a CSS rotated text in a pretty way, without the text appears to be mangled.

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);
}

Thank you very much for your help.

Answer 1

With 315 degree rotated text on my website, I have used the font-family:courier with line-height:100% and font-style:normal as an acceptable cross browser solution for my purposes. A second best solution (text rendered perfectly on IE and Mozilla but not perfect in Chrome) was to not set a font-family.