web-dev-qa-db-ja.com

CSSでフォントアンチエイリアス効果を適用する方法は？

CSSで鮮明、シャープ、強力、スムーズなどのPhotoshopのようなフォントアンチエイリアスを適用するにはどうすればよいですか？

これらはすべてのブラウザでサポートされていますか？

htmlcsscss3antialiasing
48
Mehar

ここに行きます。

1

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

2

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
96
Gildas.Tambo

簡単な答え：できません。

CSSには、ブラウザでのフォントのレンダリングに影響するテクニックはありません。システムだけがそれを行うことができます。

明らかに、ピクセル密度の高い画面ではテキストのシャープネスを簡単に実現できますが、通常のPCを使用している場合は実現が困難になります。

滑らかな新しいフォントがいくつかありますが、それを犠牲にして多少ぼやけて見えます（たとえば、Adobeのほとんどのフォントを見てください）。ただし、 Google Fonts では、デザインは滑らかだがぼやけたフォントを見つけることもできます。

フォントのレンダリングとテキスト効果のためのいくつかの新しいCSS3テクニックがありますが、これらのテクニックの一貫性、パフォーマンス、および信頼性は、大きく依存するべきではないほど大きく異なります。

8
Jace Cotton

最適に動作します。この構文をすべてのクラスまたはIDに追加せずにサイト全体で使用する場合は、次のCSSをcss本文に追加します。

body { 
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: url('./images/background.png');
    text-align: left;
    margin: auto;

}
7
user3267537