2011-04-15 11 views
1

新しいウェブサイトのPSDモックアップ用のスタイルシートを設定しています。モックアップのテキストのほとんどは、Photoshopの「シャープな」アンチエイリアシング方法を使用しています。CSSでPhotoshopスタイルのアンチエイリアシングスタイル

これらの種類のPhotoshopアンチエイリアシング方法を再作成するにはどうすればよいですか?異なるフォントの重みを設定すると、ところで

...道オフに見えるあなたのウェブサイトは、複数のOSの中に、複数のブラウザに示されようとしているので、フォントは、ゴシックので、ここで

+0

私はテキストを画像としてあらかじめレンダリングしていましたが、これは頻繁に変更される可能性が高い本文テキストであり、明らかにすべての画像を使用したくありません! –

答えて

2

単純な代替案は、CSS3プロパティである、text-shadowある:

#foo { 
    /* text-shadow: [color] [horizontal offset] [vertical offset] [blur] */ 
    text-shadow: #fff 0 1px 0; 
} 

は設定の周り再生。さまざまな色やぼかしの値を試して、非常に鋭い端の鋭い見た目のフォントを滑らかにすることができます。

+0

明らかに、これは銀色の弾丸ではありませんが、私は効果が目にはとても喜んでいると言わなければなりません。 –

0

が起こっているフォントフェイスのもの@無面白いです一貫したフォント表示を得る方法はありません。私はそれがフォントスムージングに関してはOSにあると思う。

必要な場合は、その部分を画像としてレンダリングするか、CufonまたはsIFRを使用してください。

これまでのやり方は、フォントが少し粗い場合は、微妙なCSS3 text-shadowを追加すると、より滑らかに見えます。

0

アンチエイリアスやその他のテキストレンダリングエフェクトをカスタマイズするには、スクリプトベースのライブラリ(cufónが似ています)を使用できます。このような解決法のほとんどは(すべてではないにせよ)、ヘッダーやその他のものにのみ適切であり、全身テキストではないことに注意してください。

1

font-smooth CSS3プロパティが有用であり得る:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
関連する問題