Webページのフォントレンダリング

StackOverflow https://stackoverflow.com/questions/33881

  •  09-06-2019
  •  | 
  •  

質問

私はウェブページを作成するときにいつも同じ問題に遭遇します。約 16 ～ 18 ピクセルより大きいフォントを追加すると、見た目がひどくなります。ギザギザでピクセル化されています。さまざまなフォントとウェイトを使用してみましたが、あまりうまくいきませんでした。

注記：このようなのは Windows でのみです。主に Opera と FF で IE7 でも動作しますが、それほど悪くはありません。Linux ではフォントがきれいに見えます。Macは見たことないです。

これを修正するために皆さんは何をしますか?何かあれば。ここの SO のタイトルもかなりギザギザしていることに気付きましたが、見た目は悪くない程度に小さいです。

役に立ちましたか？

解決

オペレーティング システムがフォントをレンダリングする方法をユーザーに強制的に変更させることはできません。それが重要な場合は、大きな見出しを画像に置き換えることができます。これにより、フォントのレンダリング方法を正確に制御できるようになります (また、ユーザーが提案したものを使用していない場合でも、見出しが希望どおりに表示されるようになります)フォントがインストールされています）。

これを行う場合は、画像が表示されない人のために代替テキスト表現を必ず提供してください。私は CSS を使用して背景画像を表示し、見出しの内容を非表示にすることが多いです。このような。

<style>
    h1
    {
        height: 32px;
        width: 100px;
        background: url("path/to/image")
    }

    h1 span
    {
        display: none;
    }
</style>

<h1>
    <span>
       Heading Text
    <span>
</h1>

正直に言うと、すべての大きなテキストにこれを適用する場合、これはやりすぎのように思えます。また、クライアントがダウンロードする必要があるデータの量が増えることに注意してください。ただし、大きな見出しの場合、この方法を使用すると、OS でレンダリングされたテキストよりも見栄えの良いものが得られる可能性があります。

他のヒント

アンチエイリアスを有効にすると、表示の問題が解決されるはずです。

アンチエイリアスとは別に、クリアタイプを有効にしてみてください。

Windows で有効にする クリアタイプ これを解決します。ただし、ユーザーに使用を強制することはできません。これはブラウザの問題ではありません。これはオペレーティング システムのフォント スムージング方法です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top