MB-Support

パソコン初心者のサポートページ

フォント:Meiryo(メイリオ)と MS P ゴシック


以下、Windows Vista から標準付属となる Meiryo(メイリオ)フォントと、それまでの Windows のデフォルトフォント MS P ゴシックの違いを実験します。 font-family にメイリオが指定された場合、メイリオフォントがインストールされた環境ではメイリオフォントが適用され、font-family が指定されていない場合は、ブラウザのデフォルトフォント(例:IE 8 WEB 形式:MS P ゴシック、テキスト形式:MS ゴシック)で表示されます。

非メイリオ HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>フォント指定無し</title>
</head>
<body>
<p>
〜文章〜
</p>
</body>
</html>

メイリオ HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>メイリオ</title>
</head>
<body style="font-family:'メイリオ',Meiryo;">
<p>
〜文章〜
</p>
</body>
</html>


Windows Vista + Internet Explorer 8 で、上の二つのホームページを表示したスクリーンショットが右。 サムネイルをクリックするとオリジナルサイズが表示されますが、フォントを確認するために大きな画像となります。 同じサイズのIE8で、行間の違いが目立ちますが、1列に表示できる文字数も異なっています(左がMS Pゴシック、右がメイリオ)。



Windows Vista + Firefox3 で、上の二つのホームページを表示したスクリーンショットが右。 Windows Vista に Firefox3 をインストールした初期状態では、規定のフォントが IE 8 を同じ MS P ゴシックとなり、フォントサイズが 16pt となります(左が MS P ゴシック、右がメイリオ)。



Windows Vista + IE 8(左)と Firefox3(右)で font-family を指定しなかった場合。



Windows Vista + IE 8(左)と Firefox3(右)でメイリオを指定した場合。



行間:line-height:100%;

非メイリオ HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>フォント指定無し</title>
</head>
<body style="line-height:100%;">
<p>
〜文章〜
</p>
</body>
</html>

メイリオ HTMLソース(メモ帳)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>メイリオ</title>
</head>
<body style="font-family:'メイリオ',Meiryo;line-height:100%;">
<p>
〜文章〜
</p>
</body>
</html>


Windows Vista + IE 8(左)と Firefox3(右)で、行間 style="line-height:100%" を指定、font-family を指定しなかった場合。



Windows Vista + IE8(右)と Firefox3(左)で、行間 style="line-height:100%"font-family にメイリオを指定した場合。



Windows Vista + Firefox3 で、行間 style="line-height:100%" を指定、font-family を指定しない(左)場合と、font-family にメイリオを指定した場合(右)。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項