トップ Web関連 CSS関連 CSSの文字サイズ指定

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 文字列 あいうえお

参照サイト

Studio Sustoさんとこのフォントサイズ指定手法

投票数:59 平均点:10.00
前
CSSのフォントの指定
カテゴリートップ
CSS関連
次
CSSの文字要素の表示

新しくコメントをつける

題名
ゲスト名
投稿本文
より詳細なコメント入力フォームへ

ライブラリ