ChromeとIEでのQuickSand（Googleフォント）のフォントレンダリングが不十分です

QuickSand Googleフォントを使用して、すべてのブラウザで一貫した見栄えのよいフォントを取得するのに苦労しています。 ChromeとIEは、特に小さなフォントサイズでは、非常にギザギザで、ピクセル化されたエッジを表示します。ブラウザをズームすると、アーティファクトが消えることがよくあります。ここで https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png ChromeとIEでのQuickSand（Googleフォント）のフォントレンダリングが不十分です

実験のために、問題を再現jsfiddleである：ここで

は、Firefox、クロム、& Internet Explorerで問題のスクリーンショットの比較である

http://jsfiddle.net/vXd2F/

#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active { 
color: white; 
display: inline-block; 
padding: 19px 10px; 
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif; 
text-transform: uppercase;}

出典

2013-05-05 Mark1270287

問題は、Googleフォントがすべてのフォントファイルタイプを実装していないためです。解決策は、フォントリスWebフォントジェネレータを使用して不足しているファイルタイプを生成し、それを自分でホストすることでした。

出典

2013-05-06 02:55:26 Mark1270287

こんにちはマーク、私はまったく同じ問題を抱えています。あなたのソリューションと生成されたファイルを共有してもらえますか？ありがとう！ – Nils

Markのソリューションが見つかるまで、半日かけて修正を見つけようとしました。 http://www.fontsquirrel.com/tools/webfont-generatorにアクセスし、フォントファイルをアップロードしてください。 webfontkitをダウンロードしてください。キットにはstylesheet.cssがあります。セクションのstylesheet.cssを参照できます。私はSafariでフォントをレンダリングするのに問題はありましたが、ChromeやIEでは問題がありません。なぜこのソリューションが最初に見つからないのですか？これを送信していただきありがとうございます。私は悲しみのトンを救った。 – Francis

あなたはブラウザ上のフォントレンダリングをあまりにも多くすることはできません。 font-faceで試してみると良いでしょうが、それ以外の場合は変更できません。少し問題を隠蔽するために

-webkit-text-stroke: 1px black;

をしかしテキストがティッカーになります：WebKitのために

（クローム、サファリ）あなたが追加することができます。

出典

2013-05-05 17:42:03 drip

ありがとうございました。 Googleフォントが読み込まれた埋め込みフォントフェイスコードを調べてみると、それは.woffフォントフォーマットにしかリンクしていないことが判明しました。そのフォントの実装には、すべてのブラウザをサポートするための.eot、.ttf、または.svgは含まれていませんでした。不足しているファイルを生成するためにフォントリスを使用しましたが、現在はChromeとIEの方がはるかに優れています。 – Mark1270287

ChromeとIEでのQuickSand（Googleフォント）のフォントレンダリングが不十分です

答えて

関連する問題