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

ブラウザIE8

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

 状態:不明  閲覧数:16,128  投稿日: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



週間人気ページランキング / 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新