 |
2009年01月13日 |
ブラウザによるフォントサイズの違いと統一
投稿者 : mamoru tanaka
ブラウザによって文字の見た目の大きさが異なる場合があります。
これは、それぞれのブラウザが基準としている文字の大きさが違うからです。
例を挙げると
IE5.x以前 は「100%=small」であり、基準のフォントサイズがmedium。
IE6以降 は「100%=medium」で、基準のフォントサイズがmedium。
IEでは「small=16px」ですが
FireFoxでは「small=13px」。
また、macのFireFox2.xのみ「small=16px」など。
他にもブラウザごとのフォント自体の描画処理能力なども影響します。
このようなブラウザによる文字の大きさの違いをスタイルシートで統一させる方法をご紹介します。
これは、それぞれのブラウザが基準としている文字の大きさが違うからです。
例を挙げると
IE5.x以前 は「100%=small」であり、基準のフォントサイズがmedium。
IE6以降 は「100%=medium」で、基準のフォントサイズがmedium。
IEでは「small=16px」ですが
FireFoxでは「small=13px」。
また、macのFireFox2.xのみ「small=16px」など。
他にもブラウザごとのフォント自体の描画処理能力なども影響します。
このようなブラウザによる文字の大きさの違いをスタイルシートで統一させる方法をご紹介します。
まずはじめに、スタイルシートに下記3つのスタイルをbodyタグへ指定します。
具体的には
この指定により、基準となるフォントサイズが13pxになります。
次にYahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。
このパーセンテージを指定したいセレクタに記述します。
例えば、pタグを14pxにしたいのであれば、
このフォントサイズチャートを用いてサイズを指定しているサイトを最近はよく見かけます。
若干の文字の大きさの違いにより、レイアウトが大きく崩れてしまうこともあるので、ブラウザ間での文字サイズの統一ができるこの方法は、非常に役立ちます。
font: 13px; （Firefox、Safari、Opera等モダンブラウザやMac IE5に適用されます。）
*font-size: small; （Win IE7およびWin IE6標準準拠モードに適用。
「アスタリスクハック( * )」を使いWin IE全般に適応。Mac IE5には適応されません。
次の行で上書きするので、これはWin IE7およびWin IE6標準準拠モードのみの処理です。）
*font: x-small; （Win IE 5-5.5､6(後方互換モード)に適用。）
具体的には
body {
font: 13px;
*font-size: small;
*font: x-small;
}
のようになります。
この指定により、基準となるフォントサイズが13pxになります。
次にYahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。
| 10px | 77% |
| 11px | 85% |
| 12px | 93% |
| 13px | 100% |
| 14px | 108% |
| 15px | 116% |
| 16px | 123.1% |
| 17px | 131% |
| 18px | 138.5% |
| 19px | 146.5% |
| 20px | 153.9% |
| 21px | 161.6% |
| 22px | 167% |
| 23px | 174% |
| 24px | 182% |
| 25px | 189% |
| 26px | 197% |
このパーセンテージを指定したいセレクタに記述します。
例えば、pタグを14pxにしたいのであれば、
p { font-size: 108%; }
とします。
このフォントサイズチャートを用いてサイズを指定しているサイトを最近はよく見かけます。
若干の文字の大きさの違いにより、レイアウトが大きく崩れてしまうこともあるので、ブラウザ間での文字サイズの統一ができるこの方法は、非常に役立ちます。
