Text messed up when rotated

问题

I have areas on my site where text is rotated 45degrees and unfortunately rendering of that text is messed up sometimes. For example, it looks relatively ok on linux using FF and chrome, however, it looks awful on the same browsers on windows. However, IE 9-10 renders that rotated text perfectly. Is there any way to overcome this messed up text?

Here's an example: example

.wrap {height:200px; width:200px; position: absolute; top:100px;left:100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.test1 {background: green; width:150px; height:30px; color:white;text-align: center;line-height:30px;font-family:arial; font-size:12px;font-weight:bold;}​

P.S. I cannot use images to replace text, I need rotated dynamic text instead.

Thanks

回答1:

See Wonky text anti-aliasing when rotating with webkit-transform in Chrome.

The answer there recommends amending your transformation with an additional transform that triggers the 3-D processing:

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

In addition to the fix offered there, there are a few other tricks used for cleaning up webfont rendering (see How To: Clean Up Chrome and Safari's Webfont Rendering). Try adding a barely perceptible text-shadow (may or may not work):

text-shadow: rgba(255,255,255,0.01) 0 0 1px;

来源：https://stackoverflow.com/questions/13662935/text-messed-up-when-rotated