CSS: font-sizeサンプル
2006年12月4日
こちらのページはウェブデザイナーの日記の参考資料です。このページを先に見つけちゃった人はこちらの関連エントリもどうぞ↓
CSS :: font-sizeについて考えよう
----------------------------
このページはウェブデザインの参考資料として公開していますが、フォントの大きさ／見え方は以下の要素によって変化するので注意が必要です。
- DOCTYPE宣言によって変わる（ときがある）
- 親要素の指定によって変わる
- font-familyの指定によって変わる（ときがある）
またブラウザの設定その他クライアント環境によっても結果は変わってきます。このページはあなたになにかを保証するものではありません。各自いろいろと実験してみましょう。
このページのDOCTYPE宣言は「HTML 4.01 Transitional」です（check validity）。bodyタグにはfont-familyのみが以下のように指定されています。その他の指定は個々のdivのstyle=によるフォントサイズ指定のみです。
body{
font-family:"Hiragino Maru Gothic Pro","ヒラギノ丸ゴ Pro W4","Verdana","Arial","Osaka","MS Pゴシック";
}
※欧文フォントの指定をしないと極小サイズのときにアルファベットがきれいに表示されないので入れた方がよいかと。
以下はWindowsXP及びMacOSX環境の各主要ブラウザのスクリーンショットです。あなたが今見ているブラウザと他のブラウザではどんなふうに違っているかを見てみましょう。
:: WinXP IE6 :: WinXP Firefox 1.5 :: MacOSX Safari 2.0x :: MacOSX Firefox 1.5 ::
文字サイズをキーワード指定する
font-size:xx-small
font-size:xx-small
font-size:xx-small
font-size:x-small
font-size:x-small
font-size:x-small
font-size:small
font-size:small
font-size:small
font-size:medium
font-size:medium
font-size:medium
font-size:large
font-size:large
font-size:large
font-size:x-large
font-size:x-large
font-size:x-large
font-size:xx-large
font-size:xx-large
font-size:xx-large
文字サイズをパーセント指定する
font-size:50%
font-size:50%
font-size:50%
font-size:55%
font-size:55%
font-size:55%
font-size:60%
font-size:60%
font-size:60%
font-size:65%
font-size:65%
font-size:65%
font-size:70%
font-size:70%
font-size:70%
font-size:75%
font-size:75%
font-size:75%
font-size:80%
font-size:80%
font-size:80%
font-size:85%
font-size:85%
font-size:85%
font-size:90%
font-size:90%
font-size:90%
font-size:95%
font-size:95%
font-size:95%
font-size:100%
font-size:100%
font-size:100%
font-size:105%
font-size:105%
font-size:105%
font-size:110%
font-size:110%
font-size:110%
font-size:115%
font-size:115%
font-size:115%
font-size:120%
font-size:120%
font-size:120%
font-size:125%
font-size:125%
font-size:125%
font-size:130%
font-size:130%
font-size:130%
font-size:135%
font-size:135%
font-size:135%
font-size:140%
font-size:140%
font-size:140%
font-size:145%
font-size:145%
font-size:145%
font-size:150%
font-size:150%
font-size:150%
font-size:155%
font-size:155%
font-size:155%
font-size:160%
font-size:160%
font-size:160%
font-size:165%
font-size:165%
font-size:165%
font-size:170%
font-size:170%
font-size:170%
font-size:175%
font-size:175%
font-size:175%
font-size:180%
font-size:180%
font-size:180%
font-size:185%
font-size:185%
font-size:185%
font-size:190%
font-size:190%
font-size:190%
font-size:195%
font-size:195%
font-size:195%
font-size:200%
font-size:200%
font-size:200%
文字サイズをem指定する
font-size:0.1em
font-size:0.1em
font-size:0.1em
font-size:0.2em
font-size:0.2em
font-size:0.2em
font-size:0.3em
font-size:0.3em
font-size:0.3em
font-size:0.4em
font-size:0.4em
font-size:0.4em
font-size:0.5em
font-size:0.5em
font-size:0.5em
font-size:0.6em
font-size:0.6em
font-size:0.6em
font-size:0.7em
font-size:0.7em
font-size:0.7em
font-size:0.8em
font-size:0.8em
font-size:0.8em
font-size:0.9em
font-size:0.9em
font-size:0.9em
font-size:1.0em
font-size:1.0em
font-size:1.0em
font-size:1.1em
font-size:1.1em
font-size:1.1em
font-size:1.2em
font-size:1.2em
font-size:1.2em
font-size:1.3em
font-size:1.3em
font-size:1.3em
font-size:1.4em
font-size:1.4em
font-size:1.4em
font-size:1.5em
font-size:1.5em
font-size:1.5em
font-size:1.6em
font-size:1.6em
font-size:1.6em
font-size:1.7em
font-size:1.7em
font-size:1.7em
font-size:1.8em
font-size:1.8em
font-size:1.8em
font-size:1.9em
font-size:1.9em
font-size:1.9em
font-size:2.0em
font-size:2.0em
font-size:2.0em
font-size:2.1em
font-size:2.1em
font-size:2.1em
