web-dev-qa-db-ja.com

Google Webfontsは、Chrome= Windowsで途切れ途切れになります

私は自分のウェブサイトでGoogle Webfontsサービスを使用しており、これに大きく依存しています。ほとんどのブラウザで正常にレンダリングされますが、ChromeではWindowsで特に不適切にレンダリングされます。非常に不安定でピクセル化されています。

これまでのところ、Chromeは.svg形式のフォントを最初にロードする必要があります。ただし、使用しているフォントはAsapと呼ばれ、.woffでのみ使用できました。無料のオンラインサービスを使用して.svgに追加しましたが、スタイルシート（.woffの前）に追加しても、何も変わりませんでした。

私も試しました：

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

どちらかがテキストをよりスムーズにレンダリングするのに役立つことを期待しています。

今、私はアイデアを使い果たしてしまったので、フォントを変更したくありません。誰も私がこの問題を解決する方法を知っていますか？私はAdobe Browserlabを使用してレンダリングをテストしましたが、Macしか所有していないようです。サイトへのリンクは次のとおりです。 www.symvoli.nl/about

前もって感謝します！

2013年4月11日編集：

Chrome 35 Betaはついにこの問題を解決したようです：

enter image description here

cssgoogle-chromesvgfontsgoogle-webfonts
50
Joey

2014年8月の更新

Googleは最終的にこの問題をChrome 37ネイティブで修正します!!!!しかし、歴史的な理由により、この回答は削除しません。

問題

この問題は、chromeが実際に正しいアンチエイリアスを使用してTrueTypeフォントをレンダリングできないのために作成されます。ただし、chromeは引き続きSVGファイルを適切にレンダリングします。構文でsoffファイルの呼び出しをwoffより上に移動すると、chromeはsvgをダウンロードし、 woffファイルの代わりにそれを使用してください。

しかし、このバグはChrome開発チームによく知られており、2012年7月から修正中です。公式バグレポートスレッドはこちらをご覧ください。 https://code.google .com/p/chromium/issues/detail？id = 137692

2013年10月更新（@ Catch22に感謝）

一部のWebサイトではsvgのレンダリング時に断続的な間隔の問題が発生するようです。そのため、スキンを作成する より良い方法 があります。 Chromeに固有のメディアクエリでsvgを呼び出すと、間隔の問題がなくなります。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.svg#svgFontName') format('svg');
  }
}

最初のアプローチのソリューション：

最初にsvgを提供するように修正されたFontspringの防弾構文：

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf')  format('truetype');
}

参考文献：

66
Tom Sarduy
-webkit-text-stroke: 0.5px;

ページのパフォーマンスに影響するため、大きなテキストでのみ使用してください。

18
Daniel Sachs

ここでは、最初に.svgファイルを呼び出すことで修正が提案されています http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

8
cmccarra

私はいくつかの解決策を試しましたが、最終的にChromeの新しいバージョンで動作するものを思い付きました。

基本的に、TTFファイルをMozilla固有のセクションに移動しました。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.svg#svgFontName') format('svg'),
         url('webfont.woff') format('woff');
}
@-moz-font-face {
    font-family: 'MyWebFont';    
    src: url('webfont.ttf')  format('truetype');
}
4
Josh Brown

Tom＆ font-spring による回答は、何らかの理由で私のためにそれをしませんでした。 Sam Goddard によるこの修正は：

自分で実験した後、私はこの問題に対するまともな、非常に簡単な修正であると思われるものを見つけました。 Chromeは@ font-faceキットの.svgファイルを利用しており、最後に呼び出されることを好まないようです。以下は、CSSを使用した@ font-faceの標準呼び出しです。

// font-face inclusion
@font-face {
  font-family: 'font-name';
                src: url('path-to-font/font-name.eot');
                src: url('path-to-font/font-name.eot?#iefix') format('eot'),
                url('path-to-font/font-name.woff') format('woff'),
                url('path-to-font/font-name.ttf') format('truetype'),
                url('path-to-font/font-name.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

例に見られるように、.svgファイルは、呼び出されたURLのリストの最後にあります。 Webkitブラウザーをターゲットとするようにコードを修正する場合は、.svgファイルのみを使用するように指示します。

// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘font-name';
    src: url(‘path-to-font/font-name.svg’) format(‘svg’);
    }
}
2
Prae

特定のサイズでは「asap」を使用しても十分にレンダリングされないフォントである可能性があります。あなたのサイズを変更しましたh1 from 3.5emから50pxそしてそれは少し良く見えます。完璧な解決策ではないかもしれませんが、多くのグーグルウェブフォントは予測不可能であることに気づきました

1
Keith

みんな同じことをしていた。 chrome-IE10と9でも問題ありませんでした。DreamwaeevrCS6も同様のバージョンのfontspringsコードを使用しますが、最後にsvgがあります。woffおよびトムは世界中で良い例です。トムはそこにhosの例がありますが、実際にはそれをコードに入れ、必要なフォントへのパスをマップして、ビジネスをしています！

0
Simon Pointer

chrome-のWebフォントレンダリングの別のリンクリファレンス

http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

0
VGruenhagen

GoogleはブラウザとOSによって異なるwoffファイルを提供するようです。

IEからフォントをダウンロードした場合、特定のフォント用にMacのSafariでフォントをダウンロードした場合よりも約10k大きいことがわかりました。 43k対33k。また、IEバージョンはMacでは正常に見えるようですが、MacバージョンはPCでは正常に動作していないようです。MacバージョンはPC上のMozilla Firefoxで最悪に見えます。

これを試してください： http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic

SourceSansPro-Regular.woff PCバージョン27k

SourceSansPro-Regular.woff Appleバージョン24k

0
Rick Paul

私は多くの方法を試しました：-font-faceでsvgを読み込む-webkit-font-smoothening ...

後

-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

回転はよりスムーズでしたが、主な問題はなくなりました。

私にとって解決策は次のとおりです。

-webkit-text-stroke: 0.5px;
0
xs1337gx

https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/

この投稿では、Google Chromeの実験機能について少し説明します。明らかに「DisableWrite」オプションを有効にすると、ギザギザのフォントが修正されます。これは明らかにマシンごとの修正であり、フルスケールではありません。

0
zakpucci

Firefoxで開発しています。私の経験では、FFは追加のルールなしで（フォントファイルのURLを呼び出す@ font-faceを超えて）ttfフォントを非常にうまく表示します。ただし、Chromeは別の話です。 -webkit-font-smoothingを使用した場合でも：アンチエイリアス。ルールはまだフォントをかなり不規則に表示します。 Safariにはそのような問題はないようです。したがって、フォントをきれいにレンダリングできないWebkitは本質的にはありません。Chromeの問題です。

-webkit-text-stroke：0.5pxを追加しようとしませんでした。ルールが、します。

上記の答えの中で、私はトム・サルデューの答えが一番好きです。問題の説明のほかに、彼はすべての主要なブラウザーをカバーするために使用する素晴らしい@ font-faceスタックを提供します。

0
Max West