51

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

私がこれまでに見つけたのは、Chromeでは最初に.svg形式のフォントをロードする必要があるということです。ただし、私が使用しているAsapというフォントは、.woffでのみ使用可能でした。無料のオンラインサービスを使用して.svgに変換しましたが、それをスタイルシートに追加しても（.woffの前）、何も変更されませんでした。

私も試しました：

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

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

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

前もって感謝します！

2013年4月11日編集：

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

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

4

12 に答える 12

66

2014年8月更新

GoogleはついにChrome37でこの問題をネイティブに修正しました!!!。しかし、歴史的な理由から、私はこの答えを削除しません。

問題

この問題は、chromeが実際には正しいアンチエイリアシングでTrueTypeフォントをレンダリングできないために発生します。ただし、chromeはSVGファイルを適切にレンダリングします。svgファイルの呼び出しをwoffの上の構文で上に移動すると、chromeはsvgをダウンロードし、woffファイルの代わりにそれを使用します。あなたが提案するようないくつかのトリックはうまく機能しますが、特定のフォントサイズでのみ機能します。

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

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

どうやらいくつかのウェブサイトはsvgをレンダリングするときに断続的な間隔の問題を経験するかもしれません。したがって、スキンを適用するためのより良い方法があります。Chromeに固有のメディアクエリを使用してsvgを呼び出すと、間隔の問題はなくなります。

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

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

Fontspringの防弾構文は、最初にsvgを提供するように変更されました。

@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');
}

参考文献：

于 2012-11-22T08:45:04.140 に答える
18 
-webkit-text-stroke: 0.5px;

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

于 2012-10-07T13:57:06.530 に答える
8

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

于 2012-10-31T11:50:37.400 に答える
4

私はいくつかの解決策を試しましたが、最終的に、ファイルの順序を変更することに該当しない新しいバージョンの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');
}
于 2013-06-21T14:37:01.043 に答える
2

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

自分で実験した後、私はこの問題のまともな、非常に簡単な修正と思われるものに出くわしました。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’);
    }
}
于 2013-10-02T22:01:38.017 に答える
1

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

于 2012-06-08T17:16:49.300 に答える
0

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

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

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

于 2013-03-24T22:17:40.713 に答える
0

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

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

于 2013-05-09T23:12:07.647 に答える
0

みんな同じことをしていた。Chromeを除くすべてのブラウザで問題ありません。IE10と9でも問題ありませんでした。Dreamwaeevr CS6も同様のバージョンのfontspringsコードを使用していますが、最後にsvgがあります。woffとttfの前にSVGに変更してください。世界中で、すべてが良好です。トムはそこでの例に夢中になっています。実際、それを過ぎてコードにパスをマップし、必要なフォントへのパスをマップして、ビジネスを始めています。

于 2013-06-17T15:54:39.600 に答える
0

GoogleはブラウザとOSに応じて異なるwoffファイルを提供する可能性があるようです。

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

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

SourceSansPro-Regular.woffPCバージョン27k

SourceSansPro-Regular.woffAppleバージョン24k

于 2014-07-30T21:58:33.843 に答える
0

私は多くの方法を試しました：-font-faceでsvgをロードする-webkit-font-smoothening..。

後

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

回転はスムーズでしたが、主な問題は解決していません。

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

-webkit-text-stroke: 0.5px;
于 2014-09-02T07:15:24.687 に答える
0

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

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

于 2015-03-31T22:16:15.110 に答える