3

ClearType を有効にして Windows 7 を使用しています。

私のウェブサイトでは、Google Fonts のフォント「Happy Monkey」を使用しています。

私のラップトップ (Google Chrome の最新バージョン) では、アンチエイリアスがまったくないように見えますが、Nexus 4 (Chrome を使用) では、Google Fonts Web サイトと同じように非常に滑らかに見えます.

スタイルシートで試してみましfont-smooth: auto;たbodyが、まだあまり明確ではありません。

携帯電話と比較したラップトップの解像度 (1366x768、15.6 インチと 1280x768、4.7 インチ) が原因でしょうか?

Nexus で完全にズームインしても、ギザギザのエッジが 1 つも見えず、完全に滑らかです。

私のフォント宣言

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);

body {
    font: 14px 'Happy Monkey';
    font-smooth: auto; // tried with and without this
}
4

3 に答える 3

1

これは、コメントが長いため、コメントではなく回答です。

そうは言っても、Google Fonts を介してフォントを使用することは、現在 Google Chrome では苦痛です。さらに、一般的にフォント エイリアシングを処理するには多くのテストが必要であり、多くの場合、ターゲット デバイスで機能するものを調査する必要があります。

直面している問題に関するいくつかのリンクを次に示します。

私が見つけた解決策：

  • より良いフォントを使用してください。 FontSquirrel.woffには、Google Fontsの単一のフォントではなく、複数の形式を持つ優れたフォントがいくつかあります。また、あなたのために書かれたウェブキットスターターもありCSSます。

Chrome でフォントを読み込もうとしてレンダリングを改善したい場合は、宣言の先頭に SVG を配置してください。詳しくはこちらをご覧ください。

  • カスタム フォントの使用は避けてください。残念ですが、これは解決策です。多くの場合、「派手な」フォントは実際には必要ありません。
于 2013-09-18T17:47:56.397 に答える
0

これは、2 つのデバイス間のハードウェア ピクセル密度の違いによるものです。Cleartype は、大きすぎるピクセルによって生成されるギザギザの効果を隠すために Microsoft がグリフ形状に適用する歪みの派手な名前です。それらを完全に隠すことはできません。通常の画面のピクセル密度 (1 インチあたり 96 ピクセル) は、テキストを正しく表示するには低すぎます。ネクサスでは密度がはるかに高く、個々のピクセルに気付かない（そして、GoogleはCleartypeのような効果でそれらを隠すことさえしないと確信している）.

600 dpi と 150 dpi で印刷された同じテキストを比較すると、ピクセル密度が低すぎるためにテキストに発生する残骸を簡単に確認できます。(画面は少し異なる媒体ですが、それほど違いはありません)

于 2013-09-19T13:30:30.150 に答える