CSSの文字サイズ指定
ブラウザごとの違いや古いバージョン、IEの問題とややこしいフォントのサイズ問題をどうするか。
フォントサイズの指定
いろいろとあるらしいフォントのサイズに関する課題。
- ブラウザによってデフォルトのフォントサイズが違っている。
- 新しいブラウザではページ全体のサイズを拡大縮小するのが一般的。
- IEには文字だけを大きくする機能があり、これに対応させるべき。
- 「YUI Fonts CSS」が便利
- 厳密にはpxで指定するしかない。
- emは、その要素のフォントサイズを参照しますが、それがfont-size自身に使われた場合は、例外でその親要素のフォントサイズの算出値を参照
- キーワード指定はxx-small、x-small、small、medium、large、x-large、xx-largeの7段階で1段階上がると1.2倍
- キーワード指定はCSS1 では1.5倍、CSS2 では1.2倍
- キーワード指定はWindows版Internt Explorer 6 と Macintosh版Internet Explorer 5 においてはレンダリングモードによっても標準準拠（standard）モードでは1.2倍、後方互換（quirk）モードでは1.5倍という違いがある。
- IE5.x は「100% = small」でデフォルトが medium
- IE6 は「100% = medium」でデフォルト medium
- em 指定では、ブラウザメニューからのサイズ変更の場合に、その拡大縮小率の値がおかしくなる場合があるらしい。
- Win IE6には，font-sizeをem，exで指定した場合のバグがあるらしい。
- %で指定した場合は「親要素のフォントサイズ」を基準として計算される。
- %で指定されると子孫に継承されるので、複利計算となりどんどん乗算されて行く。
- 基本的には%指定が無難。
- %指定に於いても、ブラウザによって境界値がちがう。このサンプルは『d-spice』さんの『font-size指定』にサンプルが出ていて詳しいです。
- CSS 3には「rem」という単位がある。
- いろいろと難しいので『oliss.com』さんとこの『フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック』を参照されたし。
- 上記サイトから、『rem』をサポートするのは、Firefox3.6+, Chrome, Safari5, IE9+とのこと。
- さらにIE9が文字のサイズを変更することをサポートする。
- で、body { font-size: 14px; font-size: 1.4rem; } /* =14px */、というようにpxとremを併記する事でIE7/8はページのズームを使ってフォントのサイズ変更は諦めて、フォント変更はIE9以上を使ってねという事のようです。
- もうじきXPのサポートも切れる御時世ですからね、もうIE9以下は傍流ですよ、となっても仕方ないとは思うのですが。
| ブラウザ | Windows | Macintosh | ||
|---|---|---|---|---|
| プロポーショナル | 等幅 | プロポーショナル | 等幅 | |
| IE 8.0 | 16px | 16px | ||
| IE 7.0 | 16px | 16px | ||
| IE 6.0 | 16px | 16px | ||
| IE 5.2 | 16px | 16px | ||
| Firefox 3.0 | 16px | 16px | 16px | 16px |
| Firefox 2.0 | 16px | 16px | 14px | 14px |
| Firefox 1.0 | 14px | 14px | ||
| Opera 9.0 | 16px | 16px | 16px | 16px |
| Safari 3.0 | 16px | 13px | 16px | 13px |
| Netscape 7 | 16px | 16px | 14px | 14px |
| CSS 絶対サイズ | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| 拡縮条件 | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| h1-h6要素 | h6 | h5 | h4 | h3 | h2 | h1 | ||
| font要素 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
| パーセンテージ | 60% | 75% | 88.8% | 100% | 120% | 150% | 200% | 300% |
hX 指定文字のYUI3 cssbase-min.css適応時の再現サンプル
文字の領域が分かるようにバックグランドのみ指定
h1 タイトル行 18px Bold margin:top bottom 1em
h2 タイトル行 16px Bold margin:top bottom 1em
h3 タイトル行 14px Bold margin:top bottom 1em
h4 タイトル行 13px Bold margin:0px
h5 タイトル行 13px Bold
h6 タイトル行 13px Bold
p文字列 YUI3 cssbase-min.css 適応時再現 13px 一行目
p文字列 YUI3 cssbase-min.css 適応時再現 13px 二行目
hX 指定文字のYUI3 cssbase-min.css適応時の再現サンプル
文字の領域が分かるようにバックグランドのみ指定
xx-large 標準サイズ+3 FontSize 28px
x-large 標準サイズ+2 FontSize 21px
large 標準サイズ+1 FontSize 17px
medium 標準サイズ FontSize 14px
small 標準サイズ-1 FontSize 12px
x-small 標準サイズ-2 FontSize 10px
xx-small 標準サイズ-3 FontSize 9px
inherit 祖先要素の指定を継承します FontSize 13px
この辺りは、World Wide Web Guideさんの所のfont-sizeの項に詳しいです。
| 文字サイズ(px） | 12px基準 | 13px基準 | 14px基準 | 15px基準 | 16px基準 |
|---|---|---|---|---|---|
| 6px | 50.000% | 46.154% | 42.857% | 40.000% | 37.500% |
| 7px | 58.333% | 53.846% | 50.000% | 46.667% | 43.750% |
| 8px | 66.667% | 61.538% | 57.143% | 53.333% | 50.000% |
| 9px | 75.000% | 69.231% | 64.286% | 60.000% | 56.250% |
| 10px | 83.333% | 76.923% | 71.429% | 66.667% | 62.500% |
| 11px | 91.667% | 84.615% | 78.571% | 73.333% | 68.750% |
| 12px | 100.000% | 92.308% | 85.714% | 80.000% | 75.000% |
| 13px | 108.333% | 100.000% | 92.857% | 86.667% | 81.250% |
| 14px | 116.667% | 107.692% | 100.000% | 93.333% | 87.500% |
| 15px | 125.000% | 115.385% | 107.143% | 100.000% | 93.750% |
| 16px | 133.333% | 123.077% | 114.286% | 106.667% | 100.000% |
| 17px | 141.667% | 130.769% | 121.429% | 113.333% | 106.250% |
| 18px | 150.000% | 138.462% | 128.571% | 120.000% | 112.500% |
| 19px | 158.333% | 146.154% | 135.714% | 126.667% | 118.750% |
| 20px | 166.667% | 153.846% | 142.857% | 133.333% | 125.000% |
| 21px | 175.000% | 161.538% | 150.000% | 140.000% | 131.250% |
| 22px | 183.333% | 169.231% | 157.143% | 146.667% | 137.500% |
| 23px | 191.667% | 176.923% | 164.286% | 153.333% | 143.750% |
| 24px | 200.000% | 184.615% | 171.429% | 160.000% | 150.000% |
| 25px | 208.333% | 192.308% | 178.571% | 166.667% | 156.250% |
| 26px | 216.667% | 200.000% | 185.714% | 173.333% | 162.500% |
| 27px | 225.000% | 207.692% | 192.857% | 180.000% | 168.750% |
| 28px | 233.333% | 215.385% | 200.000% | 186.667% | 175.000% |
| 29px | 241.667% | 223.077% | 207.143% | 193.333% | 181.250% |
| 30px | 250.000% | 230.769% | 214.286% | 200.000% | 187.500% |
| 31px | 258.333% | 238.462% | 221.429% | 206.667% | 193.750% |
| 32px | 266.667% | 246.154% | 228.571% | 213.333% | 200.000% |
| 33px | 275.000% | 253.846% | 235.714% | 220.000% | 206.250% |
| 34px | 283.333% | 261.538% | 242.857% | 226.667% | 212.500% |
| 35px | 291.667% | 269.231% | 250.000% | 233.333% | 218.750% |
| 36px | 300.000% | 276.923% | 257.143% | 240.000% | 225.000% |
基本的な文字サイズサンプル
以下のコードのにより指定
<p style="font-size : 22px;letter-spacing : 0px; margin: 2px 0px; padding: 0px;text-indent:0px; background:#DDFFFF;line-height:1;">22px 文字列 あいうえお</p>
22px 文字列 あいうえお
21px 文字列 あいうえお
20px 文字列 あいうえお
19px 文字列 あいうえお
18px 文字列 あいうえお
17px 文字列 あいうえお
16px 文字列 あいうえお
15px 文字列 あいうえお
14px 文字列 あいうえお
13px 文字列 あいうえお
12px 文字列 あいうえお
11px 文字列 あいうえお
10px 文字列 あいうえお
9px 文字列 あいうえお
8px 文字列 あいうえお
参照サイト
投票数:60
平均点:10.00
 CSSのフォントの指定 |
 CSS関連 |
 CSSの文字要素の表示 |
