UTF-8×IE8 フォント表示不具合

ブラウザIE8

UTF-8×IE8 フォント表示不具合

 状態:不明  閲覧数:16,260  投稿日:2009-04-18  更新日:2011-02-21
UTF-8×IE8 フォント表示不具合に遭遇。

ネットで調べた結果、どうやら、
「IE8では、フォント指定を適切に行わないと、HTMLタグ属性でlang="ja"となっている場合でも漢字表示にMingLiUが適用されてしまう」
ことが原因らしい。

クライアントサイドの対処方として、[互換表示]機能により不具合は解消出来るが、
サイト制作側としては、お客さんに[互換表示]を使わせなくてもすむよう、フォント指定を適切に行うことが必要だと思われる。

これまでは、font-familyを指定しなくても、ブラウザの方で、lang="ja"から自動判定してくれていただけのこと、
との理解で合っているだろうか。

ちなみに、Yahoo! JAPANとかどうなってるのかと思ってアクセスしてみたら、
さすがYahoo!。IE8で互換表示なしでもちゃんと表示されてた。

<メモ>
■メタタグ表記
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-language" content="ja"/>

■Yahoo! JAPAN
<html lang="ja">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript">YAHOO.Fp._ie8=1;</script>
<script language="javascript">if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://ai.yimg.jp/bdv/yahoo/javascript/csc/20060824/lib2obf_b3.js></scr"+"ipt>");</script>
select,input,textarea{*font-family:"MS UI Gothic","MS PGothic";}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:99%;}
font:12px/1.22 "MS PGothic", "Osaka", Arial, sans-serif;

■今回追記した内容
* {
font:14px/1.5em "MS PGothic", "Osaka", Arial, sans-serif;
font-family:"MS PGothic","MS UI Gothic";
}
・font:14px/1.5emの 1.5emは、line-heightの意味。
・ページ全体のデフォルトに、Yahoo!のtextareaで使用されている下記font-familyを適用してみたら、文字幅が狭くて見づらかった。
font-family:"MS UI Gothic","MS PGothic";

■表示に若干の違和感が残っていたので、再修正を行った
・font-size:100%;
・line-height:1.5;
・font-family:"MS Pゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
・設定箇所を、* {}ではなく、bodyタグまたは、ID or class へと変更した。


■参考URL
---------------------------------------------------------------------------------------------------------------------
E8ではHTMLタグの属性でlang="ja"となっている場合でも漢字表示にMingLiUが表示されてしまいます
http://social.technet.microsoft.com/forums/ja-JP/internetexplorerja/thread/4347157c-0158-46b4-b1ee-07be82f32f17/

繁体字中国語(Big5)用のフォント 「明柳」MingLiU
http://ash.jp/code/code_zh.htm

Internet Explorer 8 に組み込まれている [互換表示] ボタンにより、古いブラウザー向けにデザインされた Web サイトを表示できます
http://snow-white.cocolog-nifty.com/first/2008/08/ie8_beta2_9b84.html

Web ページが正しく表示されていないようですが、修復できますか。
互換表示により、以前のブラウザー向けに設計された Web サイトを表示できます。正しく位置合わせされていないテキストや画像を修復するには、アドレス バーの右側にある [互換表示] ボタンをクリックします。
http://www.microsoft.com/japan/windows/internet-explorer/welcome.aspx
---------------------------------------------------------------------------------------------------------------------


IE8

リンクを新しいタブで開く/IE



週間人気ページランキング / 4-30 → 5-6
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 5
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
4 16進数カラーコード / 2進数 4
5 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
5 鉄道会社毎のカラーコード | カラーコード(色) 3
5 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
6 「Bootstrapデザイン」✕「円グラフ」解析 | 2系(Bootstrap) 2
6 RGBの種類 / ビットカラー | RGB(色) 2
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
7 CSS Flexible Box Layout Module Level 1 | Flexible Box Layout Module(CSS) 1
7 直前の要素、直後の要素 | CSS 1
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 1
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 1
7 JavaScript in Bootstrap | 2系(Bootstrap) 1
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 1
7 HSL → RGB 計算方式の違い | 色変換(色) 1
2025/5/7 1:01 更新