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対応»