IE9ヤバイ。悪い意味でヤバイ。サイト運営者によっては「これIE6より酷いんじゃない？」ってなりそうな出来栄え。一般ユーザーとして利用するにも、Webサイトが対応するまでは微妙に不便になりそうです。
IE9にして気が付いた事
- IE9を利用していると、(MS Pゴシック指定したサイトの中に)不自然にフォントの間隔が詰まっているサイトがある。(Yahoo!トップページなど)
- MS Pゴシックで表示していても、従来通りの自然な文字間隔で表示されるサイトも沢山ある(Livedoorブログ、FC2ブログ全般)
- メイリオで表示させたいサイトが、何故かMS Pゴシック表示から変更出来ない場合もある
この辺の違いはなんだろうなー？
と色々なサイトのHTMLコードやスタイルシートとニラメッコしているうちに、サイトのDOCTYPE宣言と文字コードの指定で上記の違いが出ることが分かりました。
これ、不具合として修正されると良いんだけど･･･無理だろうなぁ。。。('Α`)
追記：この現象はサブピクセルフォントレンダリングの弊害？
どうやら原因はこれみたいですね。。。
【レポート】IE9、サブピクセル配置技術でテキストのズレを解消 | エンタープライズ | マイコミジャーナル
IE9はサブピクセルフォントレンダリングを行うので、フォントサイズの微妙な調整も可能。→ その結果ClearType表示しない場合は、中途半端なサイズを指定されたフォントは文字間隔がバラバラになる。。。
このページに書いた諸々は、フォントサイズの調整やフォントファミリーの指定方法を変更すれば解消されるかもしれません。
(検証してみました → IE9
用のCSSハック？Webページのフォントサイズ指定で今後注意する事 )
ホッテントリ後の追記
たくさんのはてぶ＆ツイートありがとうございます！
このページの情報は、私が冷静でない＆問題の切り分けが出来ていない箇所が沢山あります。私が冷静でないため不要に煽っている部分も沢山ありそうです。
以下ページ
IE9ヤバイの話。 - NO UIHARU, NO LIFE. - subtech
で予備知識を仕入れてから、このページをお読みいただき、間違っている部分･大袈裟に書いている部分は鼻で笑って頂くのが正しい読み方です。
mayukiさん他、はてぶで冷静なツッコミをくれた方ありがとうございます。
追記終わり。以下、本文の続きです。
IE9文字間隔確認用サンプル
文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。
※追記･注意：下記ページはスタイルシートで少しだけ調整しています。h1{font-size:16px;line-height: 20px;}
p{line-height: 1.2;}
文字コードで変わったり、かなり比較し難いものになったため。
後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。
※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし)
HTML 4.01 サンプル
HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS
XHTML 1.0 サンプル
XHTML 1.0+UTF8 XHTML 1.0+EUC-JP XHTML 1.0+SHIFT-JIS
1行目のxml宣言を削除 (IE9では関係ないっぽい)
XHTML 1.0+UTF8 XHTML 1.0+EUC-JP XHTML 1.0+SHIFT-JIS
※過去のIEはHTMLの1行目が「xml宣言かDOCTYPE宣言か」、で後方互換モードの発動を切り替えたりしてたので、念のためxml宣言を削除したものも用意。
IE9のフォントをメイリオ･MS Pゴシックで切り替えながら、各サンプルを見比べると違いがよく分かります。かなり酷い。
気のせいじゃなかった。やっぱりDOCTYPE宣言と文字コードでもの凄い違いが出る。。。
いやはやこれ、スタイルシートの組み方によっては、IE9では盛大なレイアウト崩れが発生しそうですね。。。
IE9で文字間隔がおかしくなるWebページ
XHTML 1.0で記述されたWebページ全般 ＞MS Pゴシックで字間が詰まる- XHTML 1.0で記述されたWebページをMS Pゴシックで表示する場合、IE9では文字間隔が詰まってしまい、かなり読み難いものになります。
- メイリオで表示すれば大丈夫
- IE9を互換モードで表示すれば文字間隔は正常に戻る。
でもWebページのレイアウトが崩れる場合あり。
文字コードShift-JISにした場合、段落の高さに違いが出る場合も。
IE9でフォント指定すら上手く行かないWebページ
IE9では、メイリオで表示出来ないサイトが発生する･･･？- 2011/05/08追記
この項目には正しくない記述がありました＞＜
- 正しくない記述
下記で「ページ内で日本語フォントの指定は一切行っていない。」と書いていますが、font-familyにverdanaとsans-serifを記述しています。 - font-familyにverdanaとsans-serifを記述した意図
ブラウザのフォントにMS Pゴシックを利用した場合に、半角英数字が意図しないフォントに変更されないようにしたつもりでした。
ですが、font-family にsans-serifを指定することが、この現象が発生するトリガーだったようです。
- 正しくない記述
- XHTML 1.0 + Shift-JIS と XHTML 1.0 + EUC-JPのページは、
上記はページ内で日本語フォントの指定は一切行っていない。
でも、IE9のフォント指定をメイリオにしても、MS Pゴシックで表示される。
やばい。なんだこれ？ - つまりサイト運営者も閲覧者もメイリオで表示させたいと思っているサイトが、なぜかMS Pゴシックで表示される現象が発生する。
- 大問題だろこれ
IE9でも正常な文字間隔で表示されるWebページ
HTML 4.0で記述され、文字コードShift-JISまたはEUC-JPを指定したページ- HTML 4.0で記述されていても、文字コードUTF-8を指定してた場合、(ごく稀に)行間隔がおかしくなる場合もある。
