私は Font Awesome を使って自分のサイトでアイコンを作成しています。iPod Touch with Retina ディスプレイでは素晴らしく見えますが、私の iMac では少しぼやけていて、はっきりしていないように見えます。
デモ用の画像を次に示します。
ご覧のとおり、Retina ディスプレイの iPod Touch ではフォントが非常にきれいに鮮明に見えますが、iMac では少々粗末です。
これは何が原因ですか？これはアンチエイリアシングと関係がありますか？これについて何かできることはありますか？
このような問題は、アンチエイリアシングまたはヒンティングに関連している可能性があります。小さいサイズで見栄えを良くしたい場合は、フォントを何らかのグリッド上に配置する必要があります。GitHub の担当者は、カスタム フォントのクリーン度をどのように管理したかについて、素晴らしいブログ投稿を書きました。
私はそれをグリッド上に並べて、GitHub の人々の足跡をたどろうとしました。彼らはアイコンで良い仕事をしました。
また、iPod Touch と iMac の間でアイコンの数値サイズが異なるのでしょうか、それとも DPI 設定が異なることによる副作用でしょうか? これは、フォント レンダリングの問題でもある可能性があります。
可能であれば、DPI 設定をいじってみてください。私は Mac を使用していないので、Mac でこれらの設定を変更する方法がわかりません。ただし、根本的なグリッドの問題は解決されません。問題のフォントを編集できますか?
@sporkbox の回答に加えて、特に Webkit ブラウザーに関心がある場合は、使用を選択できる次の CSS オプションがあります。
font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
一部のブラウザは、線を太くすることで太字の太さが利用できない場合に太字のフォントフェイスをエミュレートしようとすることがわかりました。その結果、あなたが説明しているような状況になります。これはあなたが持っている場所のどこかに表示されますfont-weight: normal;か?
最適なクロスブラウザー ソリューションは次のとおりです。
.your_font_class{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
-webkit-パースペクティブ: 1000;
私のためにそれを修正しました