メイリオ問題その1
というわけでメイリオについて
windowsVistaからはそれまでのMSゴシックに変わって、メイリオというフォントがシステムに使われるようになりました。
メイリオ(Meiryo)は和文ゴシック体フォントの一つであり、Windows Vistaに標準で搭載されている。Windows XP、Windows Server 2003までMicrosoft Windowsで利用されてきたMS UIゴシックに代わる新しいシステム用フォントとして提供されている。
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA
とりあえず指定してみる
/*リセットcss*/ div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,p,input,textarea,blockquote,table,th,td,address{ margin:0; padding:0; color:#000; font-style:normal; font:small/140% verdana, "ヒラギノ丸ゴ Pro W4",ヒラギノ丸ゴ Pro W4, Hiragino Maru Gothic Pro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif} /*IE6用*/ *html body div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,p,input,textarea,blockquote,table,th,td,address{ font:x-small/160% "メイリオ", Meiryo, verdana, "ヒラギノ丸ゴ Pro W4",ヒラギノ丸ゴ Pro W4, Hiragino Maru Gothic Pro, "ＭＳ Ｐゴシック", Osaka, sans-serif} /*IE7用*/ *[css]+html body div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,p,input,textarea,blockquote,table,th,td,address{ font:small/140% "メイリオ", Meiryo, verdana, "ヒラギノ丸ゴ Pro W4",ヒラギノ丸ゴ Pro W4, Hiragino Maru Gothic Pro, "ＭＳ Ｐゴシック", Osaka, sans-serif} /*Opera*/ ;;body div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fildset,p,input,textarea,blockquote,table,th,td,address{ font:small/140% "メイリオ", Meiryo, verdana, "ヒラギノ丸ゴ Pro W4",ヒラギノ丸ゴ Pro W4, Hiragino Maru Gothic Pro, "ＭＳ Ｐゴシック", Osaka, sans-serif}
あー、とりあえず指定してみます。上記はXHTML1.0TraditionalでXML宣言が入ってる想定。
IE6とかは互換モードになるのでフォントサイズをちっちゃくしてます。
比べてみる！
できあがったテストページは http://www.web-holic.com/meirio/ です。
あ、横の数字はJavaScriptでinputの横幅を出してるです。びよーん。伸びましたね−。
しかも2倍以上の伸びっぷりです。
CSSでwidthを指定していないinputをメイリオフォントで見ると予想以上に幅が広がる
ということが分かりました。怖いですね−。
メイリオで検証できない環境で『WebDesigning』とか『CSSnite』とかに乗せられてメイリオをフォント指定すると、凄惨な最期を迎えてしまうわけです。
