株式会社コニファ　ツール紹介やプログラム集：ブラウザ上で文字の見た目を確認する・その２（cssの文字サイズ指定をpxに変換）

ブラウザ上で文字の見た目を確認する・その２（cssの文字サイズ指定をpxに変換）

ブラウザ上で文字の見た目を確認する・その２
（cssの文字サイズ指定をpxに変換）

→ブラウザ上で文字の見た目確認する・その１（cssで文字サイズ指定・サンプル）へ

OS、ブラウザによってフォントの解釈がどう変わるか、各フォントのサイズ指定の状態を絶対指定のpxに直して表示します。文字列をクリックするとタイトル部分にpxで表示します。IE9等、ブラウザによっては小数点以下も表示します。

このページの表示：
cssで文字サイズ指定、font-family指定無し
font-family指定無し
ブラウザのfont-sizeプロパティの初期値:mediumを想定
Windows IE6 のデフォルト（文字サイズ"中"）では約16pxに相当
※このページを利用するには、javascriptが必要です。

7段階のxx-small～xx-largeで指定（デフォルトサイズに対する相対指定）

pxに変換：・・・
xx-small : Font Size 文字の大きさ（見た目）
x-small : Font Size 文字の大きさ（見た目）
small : Font Size 文字の大きさ（見た目）
medium : Font Size 文字の大きさ（見た目）
large : Font Size 文字の大きさ（見た目）
x-large : Font Size 文字の大きさ（見た目）
xx-large : Font Size 文字の大きさ（見た目）

それまでのサイズから相対的にやや大きく・larger、やや小さく・smaller

pxに変換：・・・
medium : Font Size 文字の大きさ（見た目）・それまでのサイズ
larger : Font Size 文字の大きさ（見た目）
medium : Font Size 文字の大きさ（見た目）・それまでのサイズ
smaller : Font Size 文字の大きさ（見た目）

emで指定（文字の高さを1としたサイズに対する相対指定）

pxに変換：・・・
0.7em : Font Size 文字の大きさ（見た目）
0.8em : Font Size 文字の大きさ（見た目）
0.9em : Font Size 文字の大きさ（見た目）
1em : Font Size 文字の大きさ（見た目）
1.1em : Font Size 文字の大きさ（見た目）
1.2em : Font Size 文字の大きさ（見た目）
1.3em : Font Size 文字の大きさ（見た目）
1.4em : Font Size 文字の大きさ（見た目）

%で指定（デフォルトサイズに対する相対指定）

pxに変換：・・・
65% : Font Size 文字の大きさ（見た目）
70% : Font Size 文字の大きさ（見た目）
75% : Font Size 文字の大きさ（見た目）
80% : Font Size 文字の大きさ（見た目）
85% : Font Size 文字の大きさ（見た目）
90% : Font Size 文字の大きさ（見た目）
95% : Font Size 文字の大きさ（見た目）
100% : Font Size 文字の大きさ（見た目）
105% : Font Size 文字の大きさ（見た目）
110% : Font Size 文字の大きさ（見た目）
115% : Font Size 文字の大きさ（見た目）
120% : Font Size 文字の大きさ（見た目）
125% : Font Size 文字の大きさ（見た目）
130% : Font Size 文字の大きさ（見た目）
135% : Font Size 文字の大きさ（見た目）

pt（絶対指定）で指定

pxに変換：・・・
8pt : Font Size 文字の大きさ（見た目）
9pt : Font Size 文字の大きさ（見た目）
10pt : Font Size 文字の大きさ（見た目）
11pt : Font Size 文字の大きさ（見た目）
12pt : Font Size 文字の大きさ（見た目）
13pt: Font Size 文字の大きさ（見た目）
14pt : Font Size 文字の大きさ（見た目）
15pt : Font Size 文字の大きさ（見た目）
16pt : Font Size 文字の大きさ（見た目）
17pt : Font Size 文字の大きさ（見た目）
18pt : Font Size 文字の大きさ（見た目）
19pt : Font Size 文字の大きさ（見た目）