Webtech Walker

font-sizeのパーセント表記一覧

font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px~16pxのときに10px~26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。

注意点

これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。

Windows

  • IE6
  • IE7
  • Firefox2.0.0.14
  • Opera9.27
  • safari3.1
  • Netscape7.01

Mac

  • Firefox2.0.0.14
  • Opera9.27
  • Safari3.1.1
  • Safari2.0.4
  • IE5.2

計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで対応しました。

表示したいサイズ / 基本サイズ * 100 (小数点以下切り上げ)

font-sizeのパーセント表記一覧表

そんな感じで計算した結果が下記です。CSSファイルの最初とかにこの対応表を書いておくと便利かなーとか思います。

基本サイズ12px

表示したいサイズ 指定する値
10px 84%
11px 92%
12px 100%
13px 109%
14px 117%
15px 125%
16px 134%
17px 142%
18px 150%
19px 159%
20px 167%
21px 175%
22px 184%
23px 192%
24px 200%
25px 209%
26px 217%

基本サイズ13px

表示したいサイズ 指定する値
10px 77%
11px 85%
12px 93%
13px 100%
14px 108%
15px 116%
16px 124%
17px 131%
18px 139%
19px 147%
20px 154%
21px 162%
22px 170%
23px 177%
24px 185%
25px 193%
26px 200%

基本サイズ14px

表示したいサイズ 指定する値
10px 72%
11px 79%
12px 86%
13px 93%
14px 100%
15px 108%
16px 115%
17px 122%
18px 129%
19px 136%
20px 143%
21px 150%
22px 158%
23px 165%
24px 172%
25px 179%
26px 186%

基本サイズ15px

表示したいサイズ 指定する値
10px 67%
11px 74%
12px 80%
13px 87%
14px 94%
15px 100%
16px 107%
17px 114%
18px 120%
19px 127%
20px 134%
21px 140%
22px 147%
23px 154%
24px 160%
25px 167%
26px 174%

基本サイズ16px

表示したいサイズ 指定する値
10px 63%
11px 69%
12px 75%
13px 82%
14px 88%
15px 94%
16px 100%
17px 107%
18px 113%
19px 119%
20px 125%
21px 132%
22px 138%
23px 144%
24px 150%
25px 157%
26px 163%

基本サイズについて

一応、基本サイズについても触れておきます。基本サイズとはここではサイトのデフォルトのfont-sizeのことを指しています。一般的にはbodyにfont-sizeを指定します(下記は12pxの場合)。

body {
    font-size: 12px;
}

/* for IE6 */
* html body {
    font-size: 75%;
}

/* for IE7 */
*:first-child+html body {
    font-size: 75%;
}

各pxに対応する、IEハックで指定するパーセントの値は以下のとおりです。

基本サイズ
12px 75%
13px 82%
14px 88%
15px 94%
16px 100%

これは余談ですが、一般的にfont-sizeを指定しないときのブラウザのデフォルトサイズは16pxです。しかしMacのFirefox2のデフォルトサイズが14pxなので、基本サイズを16pxにする場合もちゃんと指定したほうがいいです。確かFirefox3ではMac版もデフォルト16pxになると聞いたような聞いてないような。

Yahoo UIのfonts.cssについて

ぶっちゃけ、Yahoo!UIのfonts.cssを使えば?話なんですよね。fonts.cssはすごく便利だと思うし、僕も今まで何度もお世話になりました。でも、基本サイズが13px以外のときで微妙に面倒だったり、CSSがValidじゃなかったり、諸事情により使えない状況もあるので、今回はfonts.cssには頼らずにコーディングする場合の話です。

このエントリーをはてなブックマークに追加