[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・MS Pゴシック・ヒラギノ角ゴシック・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、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。

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

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

フォント(メイリオ、MS Pゴシック、ヒラギノ角ゴシックW3、Osaka)の表示テスト(キーワード指定)

em指定で見え方を比較

フォント(メイリオ、MS Pゴシック、ヒラギノ角ゴシックW3、Osaka)の表示テスト(em指定)

pt指定で見え方を比較

フォント(メイリオ、MS Pゴシック、ヒラギノ角ゴシックW3、Osaka)の表示テスト(pt指定)

px指定で見え方を比較

フォント(メイリオ、MS Pゴシック、ヒラギノ角ゴシックW3、Osaka)の表示テスト(px指定)

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

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

フォント(メイリオ)の表示テスト(パーセント指定)

MS Pゴシックのパーセント指定

フォント(MS Pゴシック)の表示テスト(パーセント指定)

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

フォント(ヒラギノ角ゴシックW3)の表示テスト(パーセント指定)

Osakaのパーセント指定

フォント(Osaka)の表示テスト(パーセント指定)

補足

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

Widnows
IE7
Mac OS
Safari

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

sponsors

top of page

©2018 coliss