Font Size
フォントのサイズを指定します。HTMLの<FONT SIZE="★">は、指定された段階(1〜7)での相対的なサイズ指定ですが、
スタイルシートでのフォントサイズの指定は、絶対や相対の値やキーワードなどでできます。
HTML 4.01で<FONT>タグは、非推奨要素となり、スタイルシートで指定指定するように推奨しています。
●関連プロパティ
{ font-size : Absolute Size | Relative Size | Absolute Keyword | Relative Keyword | Percentage }
絶対値で指定
絶対値で指定した場合、ブラウザの「文字のサイズ」変更の影響を受けません(Netscape とMacintosh IEの場合変更されます)。指定したフォントサイズで表示することができますが、モニターの解像度上(Windows:96dpi・Macintosh:72dpi)、微妙な単位で指定しても表示できません。ただし、プリンタの場合は、指定どおりのフォントサイズで印刷されます。
ピクセルは、表示するモニタやプリンタの解像度によってサイズが変わりますから、相対サイズです。しかし、Internet Explorerは、調整されて印刷しますから絶対として考えても良いかもしれません。
Internet Explorerの場合、絶対値で指定しますとブラウザで文字のサイズを変えることができません。あまり小さな文字を指定しますと、表示するモニタの解像度や画面サイズによって読みにくくなります。ご注意ください。
{ font-size : length in | length cm | length mm | length pt | length pc | length px }
font-size: 0.2in
文字のサイズを0.2インチで指定
font-size: 0.508cm
文字のサイズを0.508センチで指定
font-size: 5.07mm
文字のサイズを5.07ミリで指定
font-size: 14.4pt
文字のサイズを14.4ポイントで指定
font-size: 1..2pc
文字のサイズを1.2パイカで指定
font-size: 19px
文字のサイズを19ピクセルで指定
相対値で指定
相対値は、em(エム)とexで指定します。emは文字の最大天地、exは小文字のaやoの天地をです。1の値は、ブラウザの「文字のサイズ」に設定しているサイズが基準になります。したがって、ブラウザの「文字のサイズ」に設定により基準の文字のサイズが変わります。HTMLの<FONT SIZE=”★”>は、7段階に設定されていますが、スタイルシートの相対値は、細かな段階をつけることができます。
![]()
{ font-size : length em | length ex }
font-size: 0.7em
文字のサイズを0.7emで指定
font-size: 0.8em
文字のサイズを0.8emで指定
font-size: 0.9em
文字のサイズを0.9emで指定
font-size: 1.0em
文字のサイズを1.0emで指定(現在のブラウザの基準 サイズ)
font-size: 1.1em
文字のサイズを1.1emで指定
font-size: 1.2em
文字のサイズを1.2emで指定
font-size: 1.3em
文字のサイズを1.3emで指定
絶対キーワードで指定
絶対キーワードは、HTMLの<FONT SIZE="★">に相当します。同じように7段階になっています。この場合、ブラウザの「文字のサイズ」の設定によりサイズが変わります。
{ font-size : xx-small | x-small | small | medium | large | x-large | xx-large }
font-size: xx-small;
一番小さな文字のサイズです。
font-size: x-small;
二番目に小さな文字のサイズです。
font-size: small;
三番目に小さな文字のサイズです。(現在のブラウザの基準 サイズ)
font-size: medium;
標準の文字のサイズです。
font-size: large;
三番目に大きな文字のサイズです。
font-size: x-large;
二番目に大きな文字のサイズです。
font-size: xx-large;
一番大きな文字のサイズです。
相対キーワードで指定
相対キーワードは、親要素のサイズより大きく・小さくを指定できます。
HTMLの、<BIG>や<SMALL>タグに相当します。
{ font-size : smaller | larger }
<p style="font-size:17pt; line-height:1.25em;">親要素の文字のサイズは17ポイントです。<br>
<span style="font-size:smaller;">ここから小さく、 <span style="font-size:smaller;">より小さくします。</span></span></p>
親要素の文字のサイズは17ポイントです。
ここから小さく、
より小さくします。
<p style="font-size:14pt; line-height:1.5em;">親要素の文字のサイズは14ポイントです。<br>
<span style="font-size:larger;">ここから大きく、 <span style="font-size:larger;">より大きくします。</span></span>
親要素の文字のサイズは14ポイントです。
ここから大きく、
より大きくします。
パーセント値で指定
パーセントは、親要素との相対値で指定したい場合使用します。
親要素より、何パーセント大きくや小さく指定することができます。
{ font-size : Percentage }
<p class="sample-size" style="font-size:14pt; line-height:1.25em;">
親要素の文字のサイズは14ポイントです。<br>
<span style="font-size:75%;">ここから、25パーセント小さくします。</span><br><span
style="font-size:125%;">ここからは、25パーセント大きくします。</span>
親要素の文字のサイズは14ポイントです。
ここから、25パーセント小さくします。
ここからは、25パーセント大きくします。
|
|
|
|---|