2

Windows7のChromeでGoogleWebFontsを使用すると、フォントが正しくレンダリングされないように見えますが、Mac OSX（Chrome、Safari、Firefox）では問題なく表示されます。CSSまたはHTMLを介してこれを防ぐ方法はありますか？

この動作を紹介するサイトはここにあります（ロードされるまでに時間がかかる場合があります）。

これを示すスナップショットは次のとおりです。

フォントエイリアシングの問題

4

2 に答える 2

2

これは、ChromeがWindowsでフォントをレンダリングする方法と関係があります。Windowsがフォントのレンダリングに使用するレンダリングエンジンを変更するMacTypeと呼ばれるツールがあります。

ここからダウンロードできます：https ：//code.google.com/p/mactype/

私が調査したすべてのことから、Windows上のグーグルウェブフォントでは、現在この問題を修正する方法はありません。

それは単にそれがどのように機能するかを設計することによるものです。

Chromiums GoogleCodeサイトで問題をフォローできます 。https：//code.google.com/p/chromium/issues/detail？id = 137692

上記のリンクからの抜粋です。

私が理解しているように、主な問題は、Chromeがフォントのレンダリングに古いWindows GDIを引き続き使用しているという事実であり、見た目が悪いです。他のすべての最新のブラウザ（Operaを除く）は、WindowsでDirectWriteを使用するように切り替えられたため、フォントレンダリングが大幅に向上し、Chromeが遅れています。

古いバージョンのIEとFirefoxを振り返ると、数年前のフォントレンダリングは、現在のWindowsでのChromeのフォントレンダリングとまったく同じに見えます。当時、誰もWebフォントを使用していなかったため、人々はそれほど気づいていませんでした。Arial、Verdanaなどを使用している場合、これらのフォントはGDIエンジンで適切に機能するように注意深く設計およびヒントされているため、問題なく表示されます。ほとんどのWebフォントにはありません。

開発者にとって、回避策の1つは、SVGを最優先することですが、これが適切かどうかは疑わしいです。

-before--------------

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


-after--------------

@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.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
于 2012-11-12T19:39:15.837 に答える
0

私はここでいくつかの解決策を見つけまし た 、そしてそれは私のために働きます

次のコードで一時的な修正を追加しました...

$('body')
  .delay(500)
  .queue( 
    function(next){ 
        $(this).css('padding-right', '1px'); 
    }
  );
于 2014-03-25T12:25:37.543 に答える