最終更新日：2014年12月27日 作成日：2009年4月 2日 | コメント(0)
メイリオとＭＳ Ｐゴシックの違い
windows VISTA以降でデフォルトで搭載されるフォント「メイリオ」とVISATA以前のフォント「ＭＳ Ｐゴシック」の違いがあります。
Webサイト構築する際、違いに注意しないとレイアウトが壊れる可能性があります。
下記の検証するタグに、border:1px solid red;をつけています。
ボーダーの中の枠のサイズを計測しています。
Pタグでの検証
メイリオの場合
Internet Explorer7：27px FireFox3：24px
ＭＳ Ｐゴシックの場合
Internet Explorer7：18px FireFox3：19px
H1タグでの検証
メイリオの場合
Internet Explorer7：54px FireFox3：48px
ＭＳ Ｐゴシックの場合
Internet Explorer7：37px FireFox3：33px
H1タグのフォントサイズを80%にして検証
メイリオの場合
Internet Explorer7：22px FireFox3：20px
ＭＳ Ｐゴシックの場合
Internet Explorer7：14px FireFox3：15px
検証結果
メイリオは、ＭＳ Ｐゴシックより上下の空きを大きくとってしまいます。
高さを固定した環境じゃないとレイアウトが壊れる場合、注意した方がいいです。
この記事が参考になったらSNSにお願いします。
Tweet
Tweet
コメントする