Windows7用 IE11 のフォント周りについて。バグとか不具合とかじゃないんだろうけど･･･こういう所はもう少しチェックしてリリースしてくれよってお話です。

ちなみに、「ユーザー目線の話」と「サイト運営者目線の話」がゴッチャになってて、チョット読みにくいお話になっています(^_^;

IE11の font-family:sans-serif; の扱いが解らない

Windows7版とWindows8.1版で挙動が違う('Α`)

XHTML 1.0宣言した文書内でfont-family:sans-serif;を指定し、ブラウザのフォント設定を「メイリオ」にした場合･･･
　・Windows7版はMS Pゴシックで表示される。
　・Windows8.1版ではメイリオで表示される。
　　(ちなみにIE10ではメイリオ表示される)
　　(FirefoxやChromeなど他のブラウザもメイリオで表示される。)

Win7版IE11だけMS Pゴシックです。
スタイルシートでsans-serif指定するのが悪いのだろうけど、OSによって挙動が違うのは凹みます。

この件に関する予備知識

上で紹介したリンク先では

そもそも san-serif がMS P ゴシックなのもたまたまかもという勢いである(別に何か決まってるわけではない)のでInternet Explorer 9 RC 版用テスト ガイド:5.フォント・テキスト処理には以下のように書かれています。

フォント指定記述において、日本語フォント名を明記せず、英語フォント名や汎用フォントファミリー名を用いている場合、意図しないフォントが表示に使われる場合があります。日本語フォント名を明記して下さい。また、Font-family の中でフォントを複数指定する場合は、表示したいフォント名順に列挙して下さい。

CSS 3 Font Moduleの3.1.1 Generic font familiesにはsans-serifはGothic (Japanese)と書かれてるのでsans-serifを指定することでゴシック系の何かが指定された相当だと思えばそういうものな感じでもあります。

ってな感じに解説されているので「どのフォントで表示されるか？」はブラウザの勝手、という考え方もアリなのですが･･･でも同じブラウザがOSの違いで違う結果を返すのはチョット。。。と思ってしまいます。

Windows7版IE11では、(sans-serif指定されていると)フォントの変更ができない

ここでフォント指定できない。
Windows7のIE11
▲クリックで拡大
文書内でsans-serifを指定していると「仕方が無い事」なのかもしれないのですが、Win7版IE11ではメイリオに変更できません。(他のブラウザなら好きなゴシックフォントを指定できるのに･･･。)

解決策

ユーザー側
Windows7のIE11-フォント解決策の図
▲クリックで拡大
[インターネットオプション]＞[全般タブ]＞[ユーザー補助]で、
[Webページで指定されたフォント スタイルを使用しない]にチェックを入れる。
(ただし これをやると、全てのサイトがブラウザ指定のフォントになる)

サイト運営者
Windows7版のIE11で「ブラウザの指定するフォント」でWebサイトを表示しようと思った場合は、Webサイトのスタイルシートでfont-familyの指定からsans-serifを削除する事。

メインの情報はここまで。以下はおまけ。

スポンサー リンク

その他、IE11の不満な点(2点)

その1：Amazonのフォントが小さすぎる
Amazonのフォントが小さすぎる
▲クリックで拡大
  • FirefoxやGoogle Chrome、IE9以前では発生しない。
  • Amazonの問題は、サイトを互換表示指定にすれば治るので、それほど大きな問題ではない。しかし･･･
  • これIE10から発生したバグ。
    本来はIE11では治ってるべきだと思うのだが･･･
    どうなってんだコレ('Α`)

その2：Yahoo!トップページ/メールボックスの半角太字が読みにくい
Yahoo! トップページの半角太字が読みにくい
▲Topページはまだ良いとして･･･
海外から来たメールの件名などがスッゲェ読み難い('Α`)

とりあえずこれは、IE11よりもYahoo!の問題。
Yahoo!はいい加減、TOPページのフォントを何とかして欲しい。

IE10までは、互換表示設定すればフォント間に適度な間隔が空き、読みやすくなっていました。しかしIE11では仕様が変わり、互換表示設定でもサブピクセル配置技術が有効になったようです。

  • IE9、IE10では、Yahooを「互換表示」で表示すればこの問題は解消されたが、IE11では「互換表示」設定を行ってもこの問題は解消されない。
  • Windows7版だけでなく、8.1版のIE11でも同様の結果になってた。
    フォントの字間が詰まって読み難い。

サイト運営者としてみると、IE11は11px以下のMS Pゴシック(もしくはビットマップフォント)は使いにくい状況になってます。
ユーザー目線で見ても、私はMS Pゴシック大好き人間なので、MS Pゴシックで利用できるサイトはそのまま利用したい。でも･･･IE11は半角太字文字がくっついちゃって読み難い。
IE11はもう、強制的にメイリオを使用するしかないのか･･･。

互換性についてなど:外部サイトの参考リンク


「IE11、ここはマシになっていた」って所

IE10では、phpMyAdminの管理画面が、2度目以降(クッキーをキャッシュした状態)のログインで「画面表示が真っ白になったり乱れたりするバグ」がありましたが･･･
phpMyAdminの管理画面
▲クリックで拡大
コレは治っている模様。良かった。

愚痴(^_^;

Windows7版のIE11は、プレビュー版の頃に一度試しました。しかし当時、完成度がかなり低いと感じたため、暫く放っていました。

で、「いよいよ強制的なインストールが開始される」と云う事で現時点でのIE11はどんなモノかと試してみたのですが･･･フォント周りの問題はプレビュー版の頃からそのままでしたねえ('Α`)

あとがき

それでも近い将来、Windowsにも150～200DPIくらいの高解像度ディスプレイが登場しそうな雰囲気があるので、IE11のような高DPIをサポートしたブラウザは楽しみな存在のひとつであります。

また過去のIEとの互換性を捨て、WebGL導入した事で他のモダンブラウザと互角以上に戦える存在に成長した事も、今後に期待が持てる出来に仕上がっています。

結局、今回もまた慣れるまでに時間がかかりそうなブラウザだなあ･･･というのが正直な感想になりました(^_^;
IE11は、150DPIくらいの4Kディスプレイを購入出来るようになって、初めてありがたみが分かる存在なんだろうか･･･？と、そういう方向に救いを見出している所です。