1

私のサイトにはテキストが 45 度回転している領域があり、残念ながらそのテキストのレンダリングがめちゃくちゃになることがあります。たとえば、FF と chrome を使用する Linux では比較的問題ないように見えますが、Windows の同じブラウザーでは見栄えが悪くなります。ただし、IE 9-10 では、テキストを完全に回転させてレンダリングします。このめちゃくちゃなテキストを克服する方法はありますか?

例を次に示します 。

.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;}​

PS 画像を使用してテキストを置き換えることはできません。代わりに回転した動的テキストが必要です。

ありがとう

4

1 に答える 1

4

Chrome で webkit-transform を使用して回転する場合の不安定なテキスト アンチエイリアスを参照してください。

そこでの回答では、3D 処理をトリガーする追加の変換を使用して変換を修正することをお勧めします。

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

そこで提供された修正に加えて、Web フォントのレンダリングをクリーンアップするために使用される他のいくつかのトリックがあります (「How To: Clean Up Chrome and Safari's Webfont Rendering」を参照)。かろうじて知覚できるものを追加してみてくださいtext-shadow（機能する場合と機能しない場合があります）：

text-shadow: rgba(255,255,255,0.01) 0 0 1px;
于 2012-12-01T19:40:09.593 に答える