css 文字サイズの指定ごとでの比較

2011/01/27

サンプルがあったので少し作り直した。

DOCTYPEの指定で見え方が違う。
このサイトは、「<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>」です。

文字サイズ「1」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="1"> ABab12あア
絶対指定 font-size:xx-small; ABab12あア
ポイント(pt) font-size:7.5pt; ABab12あア
パイカ(pc) font-size:0.625pc; ABab12あア
ピクセル(px) font-size:10px; ABab12あア
エム(em) font-size:0.625em; ABab12あア
エックスハイト(ex) font-size:1.25ex; ABab12あア
ミリメートル(mm) font-size:2.54mm; ABab12あア
センチメートル(cm) font-size:0.254cm; ABab12あア
インチ(in) font-size:0.1in; ABab12あア
パーセント(%) font-size:62.5%; ABab12あア
相対的 font-size:10; ABab12あア

文字サイズ「2」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="2"> ABab12あア
絶対指定 font-size:x-small; ABab12あア
ポイント(pt) font-size:10pt; ABab12あア
パイカ(pc) font-size:0.8333pc; ABab12あア
ピクセル(px) font-size:13.3333px; ABab12あア
エム(em) font-size:0.8333em; ABab12あア
エックスハイト(ex) font-size:1.6667ex; ABab12あア
ミリメートル(mm) font-size:3.4396mm; ABab12あア
センチメートル(cm) font-size:0.34396cm; ABab12あア
インチ(in) font-size:0.1354in; ABab12あア
パーセント(%) font-size:83.333%; ABab12あア
相対的 font-size:13.3333; ABab12あア

文字サイズ「3」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="3"> ABab12あア
絶対指定 font-size:small; ABab12あア
ポイント(pt) font-size:12pt; ABab12あア
パイカ(pc) font-size:1pc; ABab12あア
ピクセル(px) font-size:16px; ABab12あア
エム(em) font-size:1em; ABab12あア
エックスハイト(ex) font-size:2ex; ABab12あア
ミリメートル(mm) font-size:4.233mm; ABab12あア
センチメートル(cm) font-size:0.4233cm; ABab12あア
インチ(in) font-size:0.1667in; ABab12あア
パーセント(%) font-size:100%; ABab12あア
相対的 font-size:16; ABab12あア

文字サイズ「4」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="4"> ABab12あア
絶対指定 font-size:medium; ABab12あア
ポイント(pt) font-size:13.5pt; ABab12あア
パイカ(pc) font-size:1.125pc; ABab12あア
ピクセル(px) font-size:18px; ABab12あア
エム(em) font-size:1.125em; ABab12あア
エックスハイト(ex) font-size:2.25ex; ABab12あア
ミリメートル(mm) font-size:4.7625mm; ABab12あア
センチメートル(cm) font-size:0.47625cm; ABab12あア
インチ(in) font-size:0.1875in; ABab12あア
パーセント(%) font-size:112.5%; ABab12あア
相対的 font-size:18; ABab12あア

文字サイズ「5」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="5"> ABab12あア
絶対指定 font-size:large; ABab12あア
ポイント(pt) font-size:18pt; ABab12あア
パイカ(pc) font-size:1.5pc; ABab12あア
ピクセル(px) font-size:24px; ABab12あア
エム(em) font-size:1.5em; ABab12あア
エックスハイト(ex) font-size:3ex; ABab12あア
ミリメートル(mm) font-size:6.35mm; ABab12あア
センチメートル(cm) font-size:0.635cm; ABab12あア
インチ(in) font-size:0.25in; ABab12あア
パーセント(%) font-size:150%; ABab12あア
相対的 font-size:24; ABab12あア

文字サイズ「6」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="6"> ABab12あア
絶対指定 font-size:x-large; ABab12あア
ポイント(pt) font-size:24pt; ABab12あア
パイカ(pc) font-size:2pc; ABab12あア
ピクセル(px) font-size:32px; ABab12あア
エム(em) font-size:2em; ABab12あア
エックスハイト(ex) font-size:4ex; ABab12あア
ミリメートル(mm) font-size:8.467mm; ABab12あア
センチメートル(cm) font-size:0.8467cm; ABab12あア
インチ(in) font-size:0.333in; ABab12あア
パーセント(%) font-size:200%; ABab12あア
相対的 font-size:32; ABab12あア

文字サイズ「7」のサンプル

指定方法 サンプル
標準(fontタグ) <font size="7"> ABab12あア
絶対指定 font-size:xx-large; ABab12あア
ポイント(pt) font-size:36pt; ABab12あア
パイカ(pc) font-size:3pc; ABab12あア
ピクセル(px) font-size:48px; ABab12あア
エム(em) font-size:3em; ABab12あア
エックスハイト(ex) font-size:6ex; ABab12あア
ミリメートル(mm) font-size:12.7mm; ABab12あア
センチメートル(cm) font-size:1.27cm; ABab12あア
インチ(in) font-size:0.5in; ABab12あア
パーセント(%) font-size:300%; ABab12あア
相対的 font-size:48; ABab12あア

参考:Font Size 比較表 ~プロポーショナル~

新着(ニュース関連以外)

2018-07-26
年賀状で「新春」とか書くけど・・・何故なんだろうと8月を目前にした今、疑問に思った。
2018-05-16
PHPで画像のヘッダ情報(?)の「Orientation」を元に画像回転させたい。
2018-03-05
Android Studioをインストール。エミュレータを軽くするトコまで終わらせたかったけど、挫折した。
2018-02-23
プッシュ通知について調べてた時にでてきたServiceWorker。そのServiceWorkerについてのメモ。
2017-12-13
jqueryで取得したDOM要素をオブジェクトじゃなくて、配列で受け取りたい