2

CSS3 のローテーション後のテキストの見た目が煩わしいことにお気付きだと思います。テキストがぱりぱり、ぎざぎざ、位置合わせされていないように見える...

を含むいくつかの回答を見つけました-webkit-font-smoothingが、それはまったく効果がありません。

その後、独自の解決策を見つけました。filterプロパティを適用するだけです! はい、うまくいきます！任意のフィルター (不透明度、グレースケール、ぼかし) で動作します!

したがって、テキストを回転させて適用すると (Chrome の場合)

-webkit-filter: blur(0px);

と（FFの場合）

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

結果ははるかに優れています。テキストはきれいに配置され、サクサクしたりギザギザになったりすることはありません。しかし...今、テキストは少しぼやけています。filter のためblurではなく、他のフィルターでも同じ結果が得られます。繰り返しますが、-webkit-font-smoothing効果はありません。

これが jsfiddleです。これら 2 つの段落の違いがわかります。color: red;（ に申し込むとpさらに違いがよくわかります。）

さて、私の質問は、他のプロパティを使用して、テキストの回転後にこのレンダリングの問題を修正するより良い方法はありますか? または、少なくともフィルターを使用した後にこのぼかし効果を修正する方法は?

前もって感謝します！

4

1 に答える 1

1

これについてできることはあまりないと思います。

コンピュータ フォントは、水平および垂直に配置された 2 次ピクセルのグリッドで表示されるように開発されています。文字を 90° (または 45°) の倍数以外で回転させても、満足のいく結果が得られることはほとんどありません (少なくとも小さいサイズのフォントではそうではありません)。通常の Web サイトに表示されます¹)。これは、それらをレンダリングするためにまだ 2 次ピクセルしか使用できないためです。そのため、多くの丸めと補間を行う必要があり、最終的に複数のピクセルで、本来あるべきものの一部を何らかの方法で表示する必要があります。前に小さな「ドット」が 1 つだけあります。サブピクセル レンダリングでさえ、それを修正することはできません (回転したテキストの認識される「ぼやけ」に追加されることさえあります)。

¹ フィドルのフォント サイズを 5em に変更してみてください。回転したテキストが非常に見栄えがすることに気付くでしょう。少なくとも今日の画面のピクセル密度では不可能な小さなテキスト サイズの場合 (通常の TFT よりも Retina ディスプレイの方が少し見栄えがするかもしれません)。

于 2013-04-13T14:24:52.207 に答える