RFONLINE ENDLESS G.I.G.:フォントサイズの統一

各ブラウザ間のフォントサイズの違いを統一しようって言うお話。

ユーザーがフォントサイズ変更できるようにしつつサイズを統一するとか、サイズ固定で統一する方法とか。
各ブラウザではもちろん、そのバージョンやOSによってまたデフォのフォントサイズが違う。
IE6は互換モードと標準モードで基準のサイズが違ったり、Firefox2はWinとMacで基準サイズ違うとか。
互換モードIE6以下：small=16px。
標準モードIE（6と7）：small=13px。
Firefox：midium=16px。
FireFox2.x（Mac）：midium=14px。
FireFox3.x（Mac）：midium=16px。
CSSフォントサイズ指定まとめ■表示比較（OS別）

元をpxで固定

CSSに以下を記述。

        body {
          font-size: 13px;
          font-family: 'ＭＳ Ｐゴシック';
        }
        

13pxのMS Pゴシックに統一。
font-famiryでMS Pゴシックを指定したのは、デフォルトだとフォントによって大きさが違ってくるから。
統一するだけならこれで充分だと思う。
でも、このままだとIEでブラウザからフォントサイズの変更が出来ない。

IEでサイズ変更出来る様にする

というわけでCSSを加筆修正。

        body {
          font-size: 13px;
          font-family: 'ＭＳ Ｐゴシック';
          *font-size: small;　/* 標準モードIE 6、IE 7向け */
          *font: x-small;　/* IE6以下向け */
        }
        

4行目、アスタリスクハックでIE7とIE6の標準準拠モードにfont-size:smallを適用。
5行目、IE6の後方互換モード以前のブラウザにfont-size:x-smallを適用。
これでフォントサイズが13px相当になり、IEでもブラウザ側で文字サイズの変更が可能になる。

標準準拠モードのブラウザは、font-sizeとfont-familyがセットで指定されてないfontプロパティのショートハンドはエラー吐いて読み飛ばしてくれる。
でも文法違反で怒られちゃうから使いたくない。
気になら無いならそれでイイかもしれないけど、怒られたく無いからさらに修正

        body {
          font-family: "ＭＳ Ｐゴシック";
          font-size: small !important;　/* IE 7向け */
          font-size: x-small;　/* IE 6以下 */
        }
        
        html>/**/body {
          font-size: 13px;　/* モダンブラウザ向け */
        }
        

アスタリスクハック止めてIE 7に!importantつけてfont-size:smallを、IE 6にx-smallを指定。
７行目でhtml>/**/bodyを使ってFirefox、Safari、Opera、Chrome、IE8にfont-size:13pxを指定。
これでIEでもブラウザから文字サイズの変更が出来るようになる。

サイズの変更は％で指定

Yahoo! UI Library: Fonts CSS
「Yahoo User Interface（以下：YUI）」再び。
フォントサイズを変えたい所があったら、YUI font cssにしたがって対応する%を指定すれば簡単に変更できる。
26pxまで対応。
font-size.cssなんてファイル作って各サイズをclass属性にしておくと楽かも？

        .font10 {font-size: 77%;}
        .font11 {font-size: 85%;}
        .font12 {font-size: 93%;}
        .font13 {font-size: 100%;}
        .font14 {font-size: 108%;}
        .font15 {font-size: 116%;}
        .font16 {font-size: 123.1%;}
        .font17 {font-size: 131%;}
        .font18 {font-size: 138.5%;}
        .font19 {font-size: 146.5%;}
        .font20 {font-size: 153.9%;}
        .font21 {font-size: 161.6%;}
        .font22 {font-size: 167%;}
        .font23 {font-size: 174%;}
        .font24 {font-size: 182%;}
        .font25 {font-size: 189%;}
        .font26 {font-size: 197%;}
        

使用例

        <span class="font16">おっぱい！</span>
        <span class="font20">おっきいおっぱい！</span>
        <span class="font26">もっとおっきいおっぱい！</span>