YUIのfonts.css
ブラウザ間やOS間のフォントの差異を吸収してくれるCSSライブラリにYahoo! Developer Networkで公開されているYUI(Yahoo! UI Library)の「fonts.css」があります。
利用方法は非常に簡単でhead要素などでfonts.css を読み込むだけで利用できます。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css">
Yahoo!のサーバー上のファイルを直接読み込んでも良いですし、ダウンロードしたファイルを読み込んでも大丈夫です。
fonts.css を読み込むとブラウザやOSは関係なく、font-familyは「Arial」、font-sizeは「13 px 」、line-heightが「16px」というスタイルが適用されます。
HTML中の個別にフォントのサイズを変更したい箇所では、font-sizeに93%を指定するとほぼ 12pxで表示されて、85 %を指定すると11pxで表示されます。
このように、すべてのブラウザで%で 共通する文字サイズを指定することが可能になります。
%とpxの対応表はFont-size Adjustmentを参考にしてください。
フォントファミリーやline-heightの変更
body要素に font-sizeを指定した場合、fonts.css の設定が上書きされてしまいますのでbody要素にはfont-size以外を個別に設定してください。
body{
line-height:12px;
font-family:"メイリオ";
}
基準のフォントサイズを変更する
body要素にサイズの指定を出来ないので内側にdiv要素なでを配置して指定します。
<body>
<div id="container">
・・・
</div>
</body>
#container{
font-size:93%;
}
これでid:container内の基準のフォントサイズが12pxに変更されます。
関連エントリー
知っておきたい15個のCSS TIPS
float方向のmarginが倍増するバグへの対応
marginの相殺
Firefox3でメイリオを指定するとinputのsizeが倍増する
CSSのレイアウトテクニック - Faux Absolute Positioning
スポンサードリンク
«12月のセミナー案内 | メイン | [書評]iPhoneサイト制作ハンドブック iPhone&iPod touch対応»