css - CSSでフォントをシャープにする方法は？

Question

みなさん、こんにちは。Cssのフォトショップのようなシャープなプロパティを使用しようとしていますが、どうすればよいですか？

これが私のCSSです

#login_text
{
 position:absolute;
 top:10px;
 left:18px;
 font-size:13pt;
 font-weight:bold;
 font-family:Arial;

}

Answer 1

AMK が言及した CSS3 プロパティに加えて、text-renderingアンチエイリアシングのための Webkit (Chrome) 固有のハックもあります: -webkit-font-smoothing: antialiased;(デフォルト値は だと思いますsubpixel-antialiased) 特に Windows マシンでは Webkit Web フォントのレンダリングが理想的とは言えないため、これを使用すると便利です。 もう少し詳しい情報はここにあります。

古い提案されたfont-smoothCSS3 プロパティ (こちらを参照) もありますが、私が知る限り、それは実装されておらず、何もしません (少なくとも私が見ることはできません)。

残念なことに、Web 上では、特に Windows マシン上では、Photoshop 品質のフォント レンダリングが得られないということです。これは、優れた Web フォントを選択し、自然に適切にスケーリングされるフォント サイズを選択することで補うことができますが、できることは限られています。

Answer 2

Firefox 25 は、 WebKit の -webkit-font-smoothing に相当する新しい Mac OS 専用の非標準プロパティ-moz-osx-font-smoothingを追加します。

エレメント {

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

Answer 3

text-rendering「シャープ」な値はありませんが、CSS3プロパティが最適な方法だと思います。この効果は、小さいフォント サイズで最も顕著であり、大きいフォントでは大きな違いはありません。

これに対するサポートは非​​常に限られていることに注意してください。しかし、私の知る限り、これが利用可能な唯一の方法です。

もう 1 つのオプション (カスタム フォントを使用している場合) は、単純に高品質のベクターを取得することです。