font-size

by 3 contributors:

概要

CSSfont-size プロパティはフォントのサイズを定義します。このフォントサイズは emex 単位の値の計算に使われるので、他の項目のサイズも変更する可能性があります。

構文

font-size: xx-small | x-small | small | medium | large | x-large | xx-large
font-size: smaller | larger
font-size: <length> | <percentage> | inherit

 

 

xx-small, x-small, small, medium, large, x-large, xx-large
ユーザーの既定のフォントサイズ(medium)を基準とする絶対的サイズキーワード。HTML の <font> 要素(非推奨 HTML4 廃止 HTML5)の size 属性 (1 から 7 が指定可能。初期値は 3)と同様の表示結果をもたらします。
largersmaller
上記の絶対的サイズキーワードのジャンプ率に概ね従う形で、親要素のフォントサイズに対するフォントサイズを一段階拡大ないし縮小します。
length
正の数の <length>。単位を em または ex で指定した場合、自身の親要素のフォントサイズを 1 とするサイズ比で定義されます。例えば「0.5em」と指定すれば、親要素のフォントサイズの半分のサイズとなるでしょう。
【訳注: ただし多くのモダンブラウザが可読性保持の為に、ユーザーが指定できる「最小フォントサイズ」の設定項目を持っており、そのサイズを下回る場合、製作者の意図と異なるフォントサイズで描画される可能性がある事に注意して下さい。】
パーセンテージ
親要素のフォントサイズを基準とする相対値を正の数のパーセント(%)で指定します。

一番良いのは、emex 以外の単位の、ユーザーのデフォルトフォントサイズと相対的でない値の使用を控えることです。しかしながら、「相対的でない値」が必要なら、OS が考えるモニタ解像度によって意味が変わらない px が、他の単位より好まれます。

可能なアプローチ

フォントサイズの定義にはいくつかの方法があり、キーワードと数値(pixel や em の場合)が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

キーワード

キーワードはウェブのフォントサイズを決める良い方法です。body 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

px

ピクセル(px) を単位として用いる事で、よりピクセル精度の高いフォントサイズ指定出来ます。ピクセル値は静的な値であり、OS にも依存せず、クロスブラウザで同じピクセルサイズでの文字のレンダリングを実現出来ます。ブラウザによって、同じ効果を得るのに別のアルゴリズムが使われている可能性があるため、少し結果が異なるかもしれません。

フォントサイズの指定は異なる単位の併用によっても可能です。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

注意: フォントサイズを pixel で定義することは、アクセシブルではありません。ユーザーがブラウザからそのサイズを変えられないためです(例えば、視力の不自由な方は、ウェブデザイナーが選んだサイズより大きなフォントにしたいかもしれません)。こうした配慮のあるデザインをしたい場合は、フォントサイズに pixel を使わないようにしてください。

Em

フォントサイズをセットするもう一つの方法は em 値を使うものです。em 値の大きさは動的です。font-size プロパティを定義するとき、1em はその要素の親要素で用いられているフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザのデフォルト、おそらく 16px が使われます。したがって、デフォルトでは 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

必要な pixel 値に相当する em を計算するには、次の計算式を使えます:

em = 要素に設定したい pixel 値 / 親要素の pixel 単位でのフォントサイズ

例えば、body のフォントサイズが 1em にセットされているものとすると、ブラウザ標準の 1em = 16px です。使いたいフォントサイズが 12px なら、0.75em を指定します(12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、0.625em を指定します(10/16 = 0.625)。22px なら 1.375em です(22/16)。

文書内どこでも使えるよく知られたテクニックとして、body のフォントサイズを 62.5% にすることで(これはデフォルト 16px の 62.5% です)、これは 10px、すなわち 0.625em になります。これで「px 値 を10で割る」という覚えやすい変換式を使って、どの要素にも em 単位でフォントサイズをセットできます。例を挙げます:

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.6em; /* 1.6em = 16px */
}

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

実際の表示を確認

/* 段落のテキストを非常に大きなものにします */
p { font-size: xx-large }

/* h1 のフォントサイズを、周囲のテキストの 2.5 倍にします */
h1 { font-size: 250% }

/* span タグに囲まれたテキストを 16px にします */
span { font-size: 16px; }

注意

emex 単位を font-size プロパティで使うと、「親要素の」フォントサイズに相対的な値になります(要素のフォントサイズに相対的な、他のどのプロパティとも異なります)。これは em 単位とパーセンテージが、font-size に関しては同じものであるということです。

仕様

ブラウザ毎の互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 5.5 7.0 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1) 6.0 6.0 1.0

参照

ドキュメントのタグと貢献者

Contributors to this page: teoli, ethertank, sosleepy
最終更新者: teoli,
サイドバーを隠す