web-dev-qa-db-ja.com

Google Chromeに「フォントスムージング」はありますか？

私はグーグルのウェブフォントを使用していますが、それらは非常に大きなフォントサイズで問題ありませんが、18pxではひどく見えます。フォントのスムージングには解決策があることをあちこちで読みましたが、それを明確に説明している箇所は見当たりませんし、見つかったスニペットはまったく機能しません。

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

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

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

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

スクリーンショットには、左側にGoogle Chrome、右側にFirefox/Internet Explorerが表示されます。：

google chrome on the left, firefox/internet Explorer on the right

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

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

スクリーンショットには、右側にGoogle Chrome、左側にFirefox/Internet Explorerが表示されます：

google chrome on the left, firefox/internet Explorer on the right

csscss3google-chromefontsgoogle-webfonts
141
imakeitpretty

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

最後に、Chromeチーム 修正をリリースします 2014年7月に公開されるChrome 37のこの問題について。現在の安定版の比較例を参照してください。 Chrome 35および最新のChrome 37（初期開発プレビュー）はこちら：

enter image description here

問題の状況、2013年12月

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

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

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

その問題に関する大きなブログ記事を書いたので、気軽に見てください： Google Chromeのいフォントレンダリングを修正する方法

再現可能な例

Chrome 29の最初の質問の例が今日どのように見えるかをご覧ください。

正の例：

左：Firefox 23、右：Chrome 29

enter image description here

正の例：

上：Firefox 23、下：Chrome 29

enter image description here

悪い例：Chrome 30

enter image description here

悪い例：Chrome 29

enter image description here

溶液

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

enter image description here

最初の行はデフォルトで、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チームはこれを知っています。公式のバグレポート here をご覧ください。現在、バグが報告されてから11か月後でも2013年5月に解決されていません。 Google Webfontsを台無しにする唯一のブラウザがGoogle独自のブラウザChrome（！）であることは奇妙なことです。しかし、問題を解決する簡単な回避策があります。解決策については以下をご覧ください。

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

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

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

161
Sliq

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

解決策は、フォントの呼び出しを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');
  }
}

enter image description here

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

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

46
Jaime Fernandez

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

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

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

22
Kushagra

これを簡単に使用できます

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

テキストの色と上部のテキストストロークの幅が同じでなければならないことを確認してください。

14
Rishabh Gupta

これは常に機能するとは限りませんの前に言います、sans-serifフォントとopen sansのような外部フォントでこれをテストしました

時々、巨大なフォントを使用するときは、font-size:49px以上に近似してみてください

font-size:48px

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

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

font-size:49px

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

別の側面のために...

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

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

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

-webkit-backface-visibility: visible;

これに：

-webkit-backface-visibility: hidden;

（フォントはKreonです）

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

しかし、注意、その練習は常に良い結果をもたらすとは限りません。注意深く見ると、Chromeはテキストを少しぼやけて見えるようにします。

別の興味深い事実：

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

Without

-webkit-backface-visibility: hidden;なし

With

-webkit-backface-visibility: hidden;を使用

まあ、なぜそのプラクティスが機能するのかわかりませんが、それは私のために機能します。変な英語でごめんなさい。

9
Yavierre