16

[元のタイトル: IE 9 のテキストは非常に貧弱にレンダリングされます。回避策はありますか？)

IE 9 でアプリケーションのテキストがうまく表示されません。互換モードの IE 9、Firefox、および Chrome はすべてテキストを適切にレンダリングするため、問題は私のモニターの Clear Type 設定にはありません。以下は、IE 9、互換モードの IE 9、および Chrome でテキストがどのようにレンダリングされるかを並べて比較したものです。

IE9

IE 9 互換モード

ここに画像の説明を入力

この回答を適用してみましたが、IE 7 以降には適用されないようです。IE 9 の不適切なテキスト レンダリングを修正するためにサイトに適用できる回避策を知っている人はいますか?

編集：

問題のページを必要最小限にまで煮詰めました。ご覧のとおり、再現にはそれほど時間はかかりません。IE9 および IE9 標準のドキュメント モードの場合、IE にブラウザ モードがあることを確認します。

<html xmlns="http://www.w3.org/1999/xhtml">
  <body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
    Home
  </body>
</html>
4

7 に答える 7

13

簡単な回答:これは、フォント サイズをピクセルではなくpt (ポイント)で指定する場合の問題です。

つまり、新しい IE9 レンダリング エンジンは DirectWrite を使用しますが、これは GDI+ の場合のように最も近いピクセルにスナップしません。そのため、pt サイズが完全なピクセル数にマップされない場合、正確にそのように描画されます。 、ぼやけて見えるようになります。

IE8 互換モードでは、使い慣れた通常の GDI レンダリングを使用するため、この問題は発生しません。

したがって、すべてのスタイル シートなどを確認してください。ポイント サイズのフォントを要求している場合、それはまさに IE9 で指定されるものであり、使用するフォントなどによっては、ポイント サイズが鮮明で明確なサイズにマップされる場合とマップされない場合があります。

これはここで詳しく説明されています：

于 2011-04-12T18:14:27.127 に答える
3

opacity:.9999on に設定bodyすると、IE9 標準モードでテキストがレンダリングされるように見えますが、Quirks モードでのレンダリングと似ています。

于 2011-04-18T12:49:59.850 に答える
1

標準モードの IE9 は、テキストにサブピクセル アドレッシングを使用します。テキスト文字を「滑らかにする」と言うことができますが、その逆、つまり文字を「ぼかす」と言うことができます。それは本質的に同じことです。

個人的には、あなたの 3 つの画像の間に簡単に認識できる違いはなく、実際には最初の画像の方が好みです。ただし、個人の好みによります。

Web を少し検索しましたが、IE9 でサブピクセル レンダリングをオフにしてクリーニングする方法ではないようです。このリンクはあなたに興味があるかもしれません: IE9 で Cleartype (テキスト アンチエイリアシング) を無効にする

WPF には、サブピクセル フォントのレンダリングをオフにして、文字を「ピクセルにスナップ」させるオプションがあります。しかし、IE9 にはそのようなスイッチがないようです。

ただし、私の推奨事項は次のとおりです。そもそもそれをやりたいと思うのはそれほど大きな問題ですか？サブピクセル テキスト レンダリングがサイトで非常に見苦しい出力を生成する場合 (非常に小さな文字をたくさん使用していませんか?)、最初にサイトのレイアウトを再考する必要があるかもしれません。非常に小さいため、サブピクセル レンダリングで不明瞭になるタイプは、Web サイトでは避けるのが最善です。

また、将来、他のブラウザがいつテキストにサブピクセル レンダリングを追加するかはわかりません。実際、FF4 はすでに Direct2D を使用していますが、DirectWrite を使用していない可能性があります。

于 2011-04-18T04:04:41.287 に答える
1

フォントの見栄えを良くする唯一の方法は、次の方法で IE8 の機能に戻すことです。

<meta http-equiv="x-ua-compatible" content="IE=8" />

Microsoft の更新プログラムhttp://support.microsoft.com/kb/2545698は既にインストールされており、既に使用していますfont-size: 11px;

opacity:.9999解決策は何もないよりはましでしたが、IE8 モードが示すものほどではありませんでした。

于 2012-06-20T05:03:59.753 に答える
1

Internet Explorer 9 は、非常にランダムな条件下でサブピクセル アンチエイリアシングの使用を停止するようです。たとえば、これをトリガーする別の例を次に示します (他にもあると思います)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<TITLE></TITLE>
<BODY>
Outside the div - with sub-pixel AA. :)
<div style="border-radius: 1px; overflow: hidden;">
Inside the div - no sub-pixel AA. :(
</div>
</BODY></HTML>

div 内のテキストはサブピクセル (「色付き」) アンチエイリアスでレンダリングされませんが、div の外側のテキストはレンダリングされます。border-radiusバグを引き起こすには、と の両方のoverflow宣言が必要です。

(誰かが自分のシステムで発生したかどうかを試して、コメントを残してもらえますか? バグが特定のシステム構成でのみトリガーされるかどうかを知りたい.)

IE 開発者ツールのドキュメント モードを「IE9 標準」以外に切り替えると、この問題は解消されます。

私は個人的にはほとんど喜んでそれを受け入れますが、それが本当に気になる場合は、スタイルシートを段階的に削除して、それを引き起こしたものを追跡することをお勧めします.

于 2012-01-28T17:37:59.840 に答える
0

ClearType フォント レンダリングは、すべての IE9 ドキュメント モードで使用されます。サブピクセル配置は、IE9 のデフォルトの標準モードでのみ使用されます。IE9 の互換モード (Quirks、7、および 8) は、ピクセル全体のテキスト メトリックを使用します。

したがって、doctype をQuirks モードを使用するように切り替えてみてください:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

また

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

または互換モードの 1 つ。

MSDN からの詳細情報

于 2011-04-13T05:42:23.693 に答える
0

IE を使用する必要があり、この画像のようなスムージングが嫌いな場合 http://i.stack.imgur.com/SViG0.png 互換表示をオンにしてみてください (ALT+T で [ツール] メニューを表示します)。

于 2011-05-19T06:51:37.220 に答える