2014 年 6 月の問題の状況: Chrome 37 で修正されました

最後に、Chromeチーム修正版をリリースしますこの問題は、2014 年 7 月に一般公開される Chrome 37 で発生します。現在の安定版 Chrome 35 と最新の Chrome 37 (早期開発プレビュー) の比較例については、こちらをご覧ください。

2013 年 12 月の発行状況

1.) ありますいいえ@import、<link href=またはGoogleの経由でフォントを読み込む際の適切な解決策webfont.js。問題は、Chromeが単に.woffGoogle の API から取得したファイルはレンダリングがひどいです。驚いたことに、他のすべてのフォント ファイル タイプは美しくレンダリングされます。ただし、レンダリングされたフォントを少し「滑らかにする」 CSS トリックがいくつかあります。回避策については、この回答の奥深くで説明します。

2.) フォントを自分でホストする場合、この問題に対する本当の解決策があります。最初に投稿したのはハイメ・フェルナンデスこの Stackoverflow ページの別の回答では、Web フォントを特別な順序で読み込むことでこの問題を解決しています。彼の優れた回答をそのままコピーするのは申し訳ないので、そちらを参照してください。また、ほぼすべてのブラウザーでサポートされている TTF/OTF フォントのみを使用することを推奨する (証明されていない) 解決策もあります。

3.) Google Chrome 開発チームがその問題に取り組んでいます。レンダリング エンジンにいくつかの大きな変更が加えられているため、明らかに何かが進行中です。

この問題について長いブログ記事を書きましたので、ぜひご覧ください。Google Chrome で醜いフォントレンダリングを修正する方法

再現可能な例

最初の質問の例が Chrome 29 で現在どのようになっているか見てみましょう。

良い例:

左: Firefox 23、右: Chrome 29

良い例:

上: Firefox 23、下: Chrome 29

悪い例: Chrome 30

悪い例: Chrome 29

解決

上記のスクリーンショットを -webkit-text-stroke で修正します。

最初の行はデフォルト、2 行目には次の内容が含まれます。

-webkit-text-stroke: 0.3px;

3行目には次のものがあります:

-webkit-text-stroke: 0.6px;

これらのフォントを修正する方法は、単に

-webkit-text-stroke: 0.Xpx;

または RGBa 構文 (nezroy による、コメントで見つかりました。ありがとうございます!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

時代遅れの可能性もあります: テキストに単純な（偽の）影を付けます。

text-shadow: #fff 0px 1px 1px;

RGBa ソリューション (Jasper Espejo のブログで見つかりました):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

これについてブログ記事を書きました:

この問題に関する最新情報を知りたい場合は、関連するブログ投稿をご覧ください。Google Chrome で醜いフォントレンダリングを修正する方法これに関してニュースがあれば投稿します。

私の最初の答え:

これはGoogle Chromeの大きなバグであり、Google Chromeチームはこれを認識しています。公式のバグレポートをご覧ください。ここ2013 年 5 月現在、バグが報告されてから 11 か月が経過していますが、まだ解決されていません。Google Webfonts を台無しにする唯一のブラウザが Google 独自のブラウザ Chrome (!) であるというのは奇妙なことです。しかし、この問題を解決する簡単な回避策があります。解決策については以下を参照してください。

Google Chrome 開発チームからの声明、2013 年 5 月

バグレポートのコメントにおける公式声明:

Windows フォント レンダリングは現在、積極的に取り組んでいます。... 開発者が試せるようなものが、1 ～ 2 マイルストーン以内に完成することを期待しています。安定するまでのスピードは、いつものように、どれだけ早くリグレッションを根絶し、解消できるかにかかっています。