142

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

私h4はほとんどすべてのブラウザーで見栄えが悪いですが、Chrome は最悪です。Chrome では、ほとんどすべてのフォントが見栄えが悪くなります。

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

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

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

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

左がGoogle Chrome、右がFirefox/Internet Explorer

スクリーンショット例 #2

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

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

左がGoogle Chrome、右がFirefox/Internet Explorer

4

4 に答える 4

163

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

最後に、Chromeチームは、2014年7月に公開されるChrome 37でこの問題の修正をリリースします。現在の安定したChrome35と最新のChrome37（初期の開発プレビュー）の比較例をここで参照してください。

ここに画像の説明を入力してください

問題の状況、2013年12月

1.）、またはGoogleのを介してフォントをロードする場合、適切な解決策はありません。問題は、ChromeがGoogleのAPIから.woffファイルを要求するだけで、ひどくレンダリングされることです。驚くべきことに、他のすべてのフォントファイルタイプは美しくレンダリングされます。ただし、レンダリングされたフォントを少し「スムーズにする」CSSのトリックがいくつかあります。この回答では、回避策がより深くわかります。@import<link href=webfont.js

2.）フォントをセルフホストする場合、これに対する実際の解決策があります。これは、Jaime FernandezがこのStackoverflowページの別の回答で最初に投稿したもので、Webフォントを特別な順序でロードすることでこの問題を修正します。彼の優れた答えを単純にコピーするのは気分が悪いので、そちらをご覧ください。ほぼすべてのブラウザでサポートされるようになったため、TTF / OTFフォントのみを使用することを推奨する（実証されていない）ソリューションもあります。

3.）GoogleChrome開発者チームはその問題に取り組んでいます。レンダリングエンジンにいくつかの大きな変更があったので、明らかに何かが進行中です。

私はその問題について大きなブログ投稿を書きました。お気軽にご覧ください： GoogleChromeで醜いフォントレンダリングを修正する方法

再現可能な例

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);

私はこれについてブログに投稿しました：

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

私の最初の答え：

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

2013年5月のグーグルクローム開発チームからの声明

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

Windowsフォントのレンダリングは積極的に取り組んでいます。...私たちは、開発者が遊び始めることができるマイルストーンまたは2つ以内の何かを持っていることを望んでいます。安定するまでの速さは、いつものように、リグレッションを根絶して焼き尽くすことができる速さです。

于 2012-07-15T16:16:26.910 に答える
46

私は同じ問題を抱えていましたが、Sam Goddard のこの投稿で解決策を見つけました。

フォントへの呼び出しを 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回ダウンロードされることです.

この記事のスペイン語版は私のページにあります

于 2013-10-25T05:55:17.180 に答える
22

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

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

を使用することもできますsubpixel-antialiased。これにより、さまざまなタイプのスムージングが得られます (テキストが少しぼやけたり、影になったりします)。ただし、効果を確認するにはナイトリー バージョンが必要です。フォント スムージングの詳細については、こちらをご覧ください。

于 2012-07-15T04:10:14.733 に答える