UTF-8×IE8 フォント表示不具合
状態:不明
閲覧数:16,272
投稿日: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:"ＭＳ Ｐゴシック",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では、フォント指定を適切に行わないと、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:"ＭＳ Ｐゴシック",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
---------------------------------------------------------------------------------------------------------------------