フォントのレンダリングの問題
作業中のサイトのさまざまなブラウザー/ OSでフォントがどのようにレンダリングされるかについて問題があることに気付きました。私は Cantarell Google Web Fontsの16pxサイズを使用していますが、それは重要です。これがスクリーンショットです。
Firefox Ubuntu、良い：
Firefox WinXP、良い：
Chrome WinXP、悪い：
IE WinXP、悪い：
テキストで満たされたページでは、問題が大きく現れることを保証できます。なぜこれが起こるのですか？問題を解決するためのトリックはありますか？
-編集：
問題が何であるかを明確にしたいと思います：ChromeとIEで、€ 500 stats部分をよく見ると、偽のピクセルがフォントを本当にいものにしていることがわかります。
単純なテキストでは、フォントレンダリングがピクセルパーフェクトであることを保証できません。レンダリングアーティファクトのために一部のユーザーにとってテキストがどのように見えるか心配な場合は、その時点でユーザーがシステムを修正する必要があります。もちろん、その方法を知ることさえ彼らに頼ることができないので、それをやるのは言うまでもなく、ピクセルの完全性を確保したい場合は、フォントに alternative を使用する必要があります。
CSS3 @ font-faceやCanvasレンダリングのような最新の機能を使用しても、OS /ブラウザの組み合わせごとに異なる基になるフォントライブラリを使用するため、問題を解決できません。
より一般的なOSシステム/設定の設定を変更する方法をユーザーにアドバイスする「ヘルプ」ページを提供できますが、ほとんどのユーザーは気にしません。
唯一の実行可能なオプションは、Flashの交換またはサーバー側での画像の生成です。どちらも非常にアクセスしやすくなく、Flashの置き換えは一部のモバイルブラウザーのソリューションではありません。ピクセルの完全性がデバイス全体のアクセシビリティや可用性よりも重要な場合は機能しますが、これらに対してはアドバイスします。
個人的には、レイアウトが深刻に壊れているか、「読み取り不能」でない限り、代替手段を気にしないでください。ほとんどのユーザーにとって適切に見えるようにします。残りは、アーティファクトとエイリアスフォントを処理する必要があります。また、これらのユーザーは、システム上の他のすべてでまったく同じフォントレンダリングの問題を見るため、とにかく気付くことすらありません。
私は手がかり（ちょっと）を得た。悪い動作は、スクリーンフォントの端を滑らかにするために使用される方法に依存します。この設定にアクセスする方法に興味がある場合は、 ClearTypeを取得する方法 を参照してください。
この設定は、ブラウザだけでなく、OSレンダリングのあらゆる側面に影響を与えます。この設定の可能な値は次のとおりです。
- 無効（フォントは本当にひどいです）
- 標準（より良いが、まだ受け入れられない）
- ClearType（見栄えが良い）
問題は、私たち（Web開発者）がユーザーの介入なしに簡単に変更できる設定ではないことです。
興味深い記事 問題を説明し、修正できる可能性がありますが、提案された方法では、ある種のフォントスムージングがアクティブかどうかを検出できるため、実際にはあまり役に立ちません。 StandardとClearTypeを区別できる場合は、必要に応じて専用のCSSクラスをフォールバックフォントとともに追加できます。しかし、そうではありません。
さらに提案はありますか？