0

Photoshopの画像をHTMLに変換していますが、フォントサイズを11pxに設定するとぼやけてしまいますが、Photoshopでは問題なく表示されます。

遊んだ後、フォントタイプオプションをsmoothではなくに設定するとnone、Photoshopでもフォントがぼやけることに気づきました。

では、CSSを使用してフォントをシャープにして、Photoshopのフォントレンダリングを反映させるにはどうすればよいでしょうか。フォントとしてArialを使用しています。これが今の私のCSSです：

.user_status {
    color: #666666;
    font: Arial;
    font-size: 11px;
    display: block;
    margin-top: 10px;
}

素晴らしい答えをありがとうございました、それは私を大いに助けました、私は正しいものとして1つ以上の答えを選ぶことができたらいいのにと思います...

4

4 に答える 4

4

ほとんどのブラウザはシステムのフォントレンダリングライブラリを使用するため、ほとんどのフォントはオペレーティングシステムによってレンダリングがわずかに異なります。ただし、以下にリストされている2つのcss3プロパティを使用してみることができます。

-webkit-font-smoothing：[auto | イニシャル| なし| アンチエイリアス| サブピクセル-アンチエイリアス]

このプロパティは、SafariやChromeなどのWebkitブラウザでのみ機能します。詳細については、 http：//maxvoltar.com/archive/-webkit-font-smoothingを参照してください。

font-smooth：[auto | 決して| 常に| <絶対サイズ>| <長さ>]

これは、W3CのCSSフォントモジュール仕様の一部です。全体はhttp://www.w3.org/TR/WD-font/#font-smooth-propで見ることができます。このプロパティをサポートしているブラウザがあるかどうかはまだわかりません。YMMV。

于 2012-01-07T21:02:12.420 に答える
3

残念ながら、できることはあまりありません。ブラウザには、Photoshopのような高度なアンチエイリアシング設定がありません。この設定では、フォントスムージングモードをシャープ、スムース、またはクリスプに設定できます（これは私が気に入っています）。フォントを大きくしたり小さくしたりする必要があり、テキストのレンダリング方法は主にブラウザによって異なります。

于 2012-01-07T20:38:45.370 に答える
1

Webkitでは、次の設定を行うことができます。

  -webkit-font-smoothing: none;

これは、Photoshopのアンチエイリアスに近似します：なし。

こちらのデモをご覧ください：http：//jsfiddle.net/jv5W8/

于 2012-01-07T21:02:29.843 に答える
1

残念ながら、通常、ブラウザによるフォントのレンダリング方法を制御することはできません。新しいCSS3プロパティはfont-smooth、ある程度の制御を可能にするかもしれませんが、探している種類ではありません。

いくつかの代替案は、JavaScriptと画像を使用して、手動またはサーバー側でレンダリングし、目的の効果を実現することです。sIFR（Scripted 1 Inline Flash Replace）を使用して、フォントのアンチエイリアスを好きなようにできる小さなFlashムービークリップに置き換えることもできますが、Flashはほとんど普及しておらず、あまり効率的でもエレガントなソリューションでもありません。 。

したがって、この機能がどうしても必要な場合は、Photoshopで透明なPNGを作成し、テキストを画像に置き換えることをお勧めしbackground-imageますtext-indent: -9999px。

あなたが考えたいかもしれないもう一つのポイントは、あなたは本当に11pxのフォントサイズを使うべきかということです。それはかなり見づらいので、単により大きなフォントサイズを選択する方がよいかもしれません。

1この頭字語は間違っているかもしれません。

于 2012-01-07T20:48:15.500 に答える