[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック・Osaka

スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。

• absolute size
  キーワードで指定、フォントサイズはUAに依存
  ex.)small, medium
• relative size
  親要素に対しての相対指定
  ex.)smaller, larger
• length
  正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」
  ex.)10pt, 1em
• percentage
  親要素に対してのパーセント(%)指定
  ex.)100%, 120%

この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。

フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック」はWindows XP、「ヒラギノ角ゴシックW3」「Osaka」はMac OSXで使用されています。

• キーワード指定で見え方を比較
• em指定で見え方を比較
• pt指定で見え方を比較
• px指定で見え方を比較
• パーセント指定で見え方を比較
• 補足

キーワード指定で見え方を比較

em指定で見え方を比較

pt指定で見え方を比較

px指定で見え方を比較

パーセント指定で見え方を比較

メイリオのパーセント指定

ＭＳ Ｐゴシックのパーセント指定

ヒラギノ角ゴシックW3のパーセント指定

Osakaのパーセント指定

補足

今回の検証に使用したOS・ブラウザは、以下の通りです。

Widnows

IE7

Mac OS

Safari

以前のエントリーから「ヒラギノ角ゴシックW3」を追加しました。