Windowsにロードされたフォントフェイスは、本当に見栄えが悪いです。どのフォントを使用して、より良くレンダリングしますか？

編集：問題は、Vistaの設定で「Cleartype」がオンになっていないことでした。CleartypeがWindows OSにインストール/有効化されている場合、この質問にはあまり意味がありません。

CSS3のfont-faceプロパティを使用してOS /システムセット以外のフォントをロードできる新しいタイポグラフィの風がウェブに到着しました。私のMacは完全にレンダリングしますが、Windowsマシンは完全にレンダリングしません。Windowsでより適切に表示されるフォントのセットを使用する必要がありますか？

これは、スタックオーバーフローに関する質問に似ています。

そして、Myriad Proを搭載したPCで見た目が悪く見えるWebサイトの例：http : //css-tricks.com/

注：ブラウザのバージョン間（IE9とIE6の間など）のアンチエイリアスの違いについては述べていません。

私はあなたのテストの回答として、フォントのリストに加えて見栄えの良いサイズ（pxを使用してください）、または少なくとも短いテキストや小さなタイトルに使用できる方法を期待しています。

たとえば、現時点では「リーグゴシック、30ピクセル」は次のようになります。

これはコメントである必要があります（したがって、このCWを作成しています）が、質問には誤解や間違った仮定があると思います。明らかにこの質問に答えてほしいので（結局は賞金を提供しました）、ここに私の2セントがあります。

スクリーンショットから、サブピクセルレンダリングとは対照的に、フォントを定期的にレンダリングするようにWindowsを設定しているようで、おそらくブラウザーはアンチエイリアシングを実行していません（JPG圧縮ではなくなる可能性があります）。

Windowsを扱う次の例はXP Pro SP 3のものであるため 、Vistaと7 で少なくとも 同じレベルにあると想定するのは非常に安全です。

Windowsには（XPで）ClearTypeを使用するかどうかのオプションがあります。ClearTypeを使用しない場合、フォントはスクリーンショットのようにレンダリングされます。これは、CTを使用せずにWindowsのダイアログから大きく拡大した画像です。

バイナリ操作であることがわかります。ピクセルは黒または透明です。現在、CTを使用しない最新のブラウザでも、アンチエイリアスを実行しています。これは、Windows XPおよびChrome 8を搭載したcss-tricks.comからのものであり、CTはオフです（前の図と同様）。

何が起こったのか見てください？おそらくあなたが質問で述べたように、あなたはすでにやったでしょう。

注：新しいブラウザーと古いブラウザー（IE9とIE6の間など）のアンチエイリアスの違いについては説明していません。

さて、ClearType！

これは、今回はCTを使用したWindowsダイアログのまったく同じテキストです。

これが何に基づいているかに興味がある場合は、サブピクセルレンダリングに関するウィキペディアの記事を参照してください。また、ClearTypeをオンにすると、ブラウザーのレンダリングに影響しますか？Windows XPとChrome 8で同じ「その他」のテキストがあり、ClearTypeがオンの場合：

します！また、Windowsレベルで無効になっている場合でも、IE 8は（少なくとも）ClearTypeレンダリングを使用していると付け加えます。

アンチエイリアス処理されたテキストとClearTypedテキストを100％で比較することは、ClearTypedテキストをアンチエイリアス処理されていないテキストと比較するほど急進的ではありません。とはいえ、目立って大胆です：

aa：CT：

アンチエイリアスなしでどのように見えるかを確認するには、littlemadのスクリーンショットをご覧ください。

そして、比較のために、ここでOS Xのデフォルトのレンダリングで同じ「その他」です： さらに多くの ClearTypeのより大胆。

質問に答えるには：任意のフォント。オペレーティングシステムがフォントを異なる方法でレンダリングする場合、フォントをレンダリングするようにオペレーティングシステムを設定したことが原因である可能性があります。または、ブラウザがアンチエイリアスまたはClearTypeに対応していない可能性があります。

別の質問は、なぜ一部のフォントが正しくレンダリングされ、一部のフォントがレンダリングされないのかということです。これが当てはまる場合（ただし、Windowsで言及したサイトでは問題は見られません）。それとも、まったくレンダリングしなくても適切に見えるフォントを求めていますか？

また、よくある質問への回答もあります：「はい、それはすべてわかっています。ClearTypeがOS Xのレンダリングと異なるように見えるのはなぜですか！

違いがあるからです。サブピクセルレンダリングは、実装するのに軽いものではありません。ClearTypeはMicrosoftの登録商標であり、10個の特許で保護されています（+ 1件保留中; wikipediaを参照）。彼らはただ同じことはできません。

問題が参照するStackoverflowの質問と同じ場合、答えも同じではありませんか？

これはヒントの問題です。

フォントフェイスキットを生成するとき（FontSquirrelなど）、Expertオプションでヒントを指定する必要があります。

[エキスパート]を選択し、[レンダリング]で次を選択します。

ヒントを適用-Winレンダリングを改善します。

ttfautohintを使用して、フォントのヒントバイトコードを再構築できます。デフォルト設定（GDI互換）は、ウィンドウがフォントをレンダリングするのに役立ちます。

これはブラウザとは関係ありませんが、ウィンドウ自体です。

* nixシステム（unix / linux、およびUnixベースのOSXにはこれが含まれます）にはテキストの表示方法を細かく制御するオプションがあり、通常はサブピクセルレンダリングに設定されます（これは私よりもはるかに技術的な説明があります） 'あなたに与えるつもりですが、基本的にはサブピクセル（画面のピクセルの赤、緑、青の部分）を使用してテキストをレンダリングします）Windowsはcleartypeを使用しますメカニズムがあいまいです。

Windowsがサブピクセルレンダリングを行わないのは、フォントやファイルではなく、それらのフォントやファイルを表示するオペレーティングシステムだけです。

Windows XPでClearTypeをオンにする：

1）次の指示に従ってください：http : //blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx

2）次に、IExplorerでこれを実行します。http：//www.microsoft.com/typography/cleartype/tuner/step1.aspx

CSSで以下のコードを使用します

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

それはあなたを助けるかもしれません