私はgoogle webfontsを使用していますが、それらは非常に大きなフォントサイズで問題ありませんが、18ピクセルではひどいように見えます。私はフォントスムージングの解決策があることをあちこちで読んだことがありますが、それを明確に説明する場所は見つけられず、見つけたいくつかのスニペットはまったく機能しません。

私h4はほとんどすべてのブラウザでひどいように見えますが、Chromeは最悪です。Chromeでは、私のフォントのほとんどすべてがひどく見えます。

誰かが私を正しい方向に向けることができますか？おそらく、これを明確に説明するリソースを知っていますか？ありがとう！

スクリーンショットの例＃1

このスクリーンショットは、Googleが作成したプログラミング言語であるhttps://www.dartlang.org/のホームページを示しており（このWebサイトもGoogleによって作成されていることを意味します）、Google Webfontsを使用しています。

スクリーンショットの左側はGoogle Chrome、右側はFirefox / Internet Explorerです。：

スクリーンショットの例＃2

このスクリーンショットは、Typekitが提供するWebフォントを使用したAdobe.comの製品情報ページを示しています。AdobeとTypekitは、フォントに関しては専門家です。

スクリーンショットは、右側にGoogle Chrome、左側にFirefox / Internet Explorerを示しています。

問題のステータス、2014年6月：Chrome 37で修正

最後に、Chromeチームは 2014年7月に一般公開されるChrome 37でこの問題の修正をリリースします。現在の安定したChrome 35と最新のChrome 37（初期の開発プレビュー）の比較例は、次のとおりです。

問題の状況、2013年12月

1）がありますNO適切な解決策は、時にロードを経由して、フォント@import、<link href=またはGoogleのwebfont.js。問題は、Chromeが恐ろしくレンダリングするGoogleのAPIから.woffファイルを単にリクエストすることです。驚くべきことに、他のすべてのフォントファイルタイプは美しくレンダリングされます。ただし、レンダリングされたフォントを少し「滑らかにする」CSSトリックがいくつかあります。回避策はこの回答の奥にあります。

2.）フォントをセルフホスティングする場合の実際の解決策があります。最初にJaime Fernandezがこの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（！）であるのは奇妙なことです。ただし、問題を解決する簡単な回避策があります。解決策については以下を参照してください。

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

バグレポートのコメントの公式声明：

私たちのWindowsフォントレンダリングは積極的に取り組んでいます。...開発者がいじり始めることができる1つまたは2つのマイルストーン内に何かがあることを願っています。それが安定するまでの速さは、いつものように、すべての回帰を根絶して焼き尽くすことができる速さに関するすべてです。

私は同じ問題を抱えていました、そして私はサム・ゴダードのこの投稿で解決策を見つけました、

フォントへの呼び出しを2回定義する場合の解決策。最初に、すべてのブラウザで使用することをお勧めします。また、特別なメディアクエリを使用してChromeでのみ特定の呼び出しを行った後：

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

この方法を使用すると、すべてのブラウザでフォントが適切にレンダリングされます。私が見つけた唯一の欠点は、フォントファイルも2回ダウンロードされることです。

あなたは私のページでこの記事のスペイン語版を見つけることができます

Chromeは、Firefoxや他のブラウザーが行うようなフォントをレンダリングしません。これは通常、Windowsでのみ実行されているChromeの問題です。フォントをスムーズにしたい場合は、このようなタグの-webkit-font-smoothingプロパティを使用しますh4。

h4 {
    -webkit-font-smoothing: antialiased;
}

を使用することもできますsubpixel-antialiased。これにより、さまざまな種類のスムージングが行われます（テキストが少しぼやけ/影になります）。ただし、効果を確認するには、毎晩のバージョンが必要です。フォントスムージングについて詳しくは、こちらをご覧ください。

これは簡単に使えます

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

テキストの色と上部のテキストの幅が同じであることを確認してください。

私はこれが常にうまくいくとは限らないと言っていますが、私はこれをテストしましたsans-serifフォントと外部フォントでopen sans

ときどき、巨大なフォントを使用する場合はfont-size:49px、上限と上限を試してください。

これは、48pxのサイズのヘッダーテキストです（font-size:48px;テキストを含む要素内）。

しかし、font-size:49px;48ピクセル（および50ピクセル、60ピクセル、80ピクセルなど）まで上げると、興味深いことが起こります。

テキストは自動的に滑らかになり、本当に良いようです

別の側面について...

小さなフォントを探している場合は、これを試すことができますが、あまり効果的ではありません。

テキストの親に、次のcssプロパティを適用するだけです： -webkit-backface-visibility: hidden;

次のように変換できます。

これに：

（フォントはKreon）

あなたがそのプロパティを入れていないとき-webkit-backface-visibility: visible;は、継承であることを考慮してください

しかし注意してください。その方法では常に良い結果が得られるとは限りません。注意深く見れば、Chromeはテキストを少しぼやけて見えるようにするだけです。

別の興味深い事実：

-webkit-backface-visibility: hidden;Chromeでテキストを変換するときにも機能します（-webkit-transform回転、傾斜などのプロパティを使用）

なし -webkit-backface-visibility: hidden;

と -webkit-backface-visibility: hidden;

ええと、その実践がなぜ機能するのかはわかりませんが、私には効果があります。 私の奇妙な英語でごめんなさい。