Chromeのウェブフォント

私はFirefox上ではすばらしく見えるwebfontを持っています。私はtext-renderingのプロパティで遊んでみましたが、それほど魅力的ではありません。私のCSSはこのようなものです：Chromeのウェブフォント

@font-face { 
    font-family: 'TextFont'; 
    src: url('[my font file url]') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
body { 
    font-family: TextFont, Tahoma, Geneva, sans-serif; 
    text-rendering: auto; 
}

text-renderingを変更すると、Firefoxで何もしていないようですので、私はそれのための単一のスクリーンショットを掲載しています。

結果：

のFirefox（別称、 "それはどのようなものか"）
クロム - text-rendering: auto
クロム - text-rendering: optimizeLegibility
クロム - text-rendering: optimizeSpeed
クロム - text-rendering: geometricPrecision

Chromeのスクリーンショットは、Firefoxのスクリーンショットに比べてすべて悪いです。 CSSに欠けているものがありますか？

私はWindows 7、Firefox 8.0、およびChrome 15.0を使用しています。

出典

2011-12-15 cambraca

ChromeはWindows上でのフォントのレンダリングではひどいです、とGoogleが判断しない限り、それは（多かれ少なかれ、修理不可能な問題ですClearTypeを使用する）。だからあなたはLinuxに切り替える必要があります; – Blender

Linuxに切り替えるのに問題はありませんが、どこでもうまく見えるようにする必要があります。 – cambraca

私はLinuxについて皮肉っていますが、Chromeのカスタムフォントでは決して幸運を祈ることはありません。 – Blender

から私のコードを取得しますCSS。 FirefoxとChromeのテキストレンダリングエンジンが異なり、結果が表示されています。フォントが適切にヒントされておらず、Webフォント用に準備されている場合は、このような結果が期待できます。

フォントはどこから入手しましたか？

FontSquirrelで実行して、Ethanが提供する自動ヒントのいずれかがこれを少し正常化するかどうか試してみることができます。

レンダリングに関するいくつかの追加情報と、大きな差別化要因と見なされるDiretWrite .... http：//blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

出典

2011-12-15 00:45:34

うまくいけば、いつかクロムがこれを修正します。ここでバグを追跡してください： https://code.google.com/p/chromium/issues/detail?id=137692 – djsadinoff

これは私が私のすべてを行うと、それはIE、Firefoxの上で働いていますどのようにある、Chromeは

@font-face { 
    font-family: 'NeutraTextBold'; 
    src: url('../fonts/neutra_text_bold-webfont.eot'); 
    src: url('../fonts/neutra_text_bold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/neutra_text_bold-webfont.woff') format('woff'), 
    url('../fonts/neutra_text_bold-webfont.ttf') format('truetype'), 
    url('../fonts/neutra_text_bold-webfont.svg#NeutraTextBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
body{ 
font: 12px 'NeutraTextBold', sans-serif; 
color: #FFF; 
}

私は本当にあなたがこの経由を改善するために何かできることはありませんfontsquirrel

出典

2011-12-15 00:32:01 Andres

なぜ私はこれのためにdownvoteを持っているのか分かりません。ちょうど私に有効な答えと思われるものを手助けしようとしています。誰かがなぜ私にそれがdownvotedので私が将来の参照のために知っていることを共有する気にします。 – Andres

これを試してみてください：

-webkit-text-stroke: .5px

。5は任意である - 0と1の間のいくつかのピクセル値がキーです。これにより、フォントのサブピクセルヒントが強制されます。

デモ

はここで見ることができます： http://dabblet.com/gist/4154587

出典

2013-01-24 10:12:04 Barney

わからない、これはあなたが見ているものですが、Chromeは、アンチエイリアスフォントとTrueTypeフォントの問題を持っている場合。 http://www.fontspring.com/blog/smoother-web-font-rendering-chromeあたりとして、あなたの代わりにあなたのフォントの顔でのTrueType、例えば：

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

の最大の欠点は、SafariがSVGとWOFFの両方をダウンロードすることである前に、SVGフォントを指定することができます。

出典

2013-03-27 16:32:08 Nils

上記のコピー/貼り付けには注意してください。引用符はアポストロフィではなく「一重引用符」です。（CSSはそれらを理解していません） – kolosy

Yikes！私はアポストロフィを修正しました。メモをありがとう。 – Nils