[image]YUI 3: CSS Fonts

font-size、
pxで指定するとIEで拡大縮小できなくなる、font-size。

ブラウザやOSやフォントによって大きさも変わるしって事で
bodyに85%くらいを指定するくらいでおしまい、って感じに
結構ぞんざいに扱っていました。

そんな人間なのに、最近意味もなく
「YUI CSS Resetを使ってるし、YUI CSS Fontsも使ってみようかな」と思い立ち
YUI3.3をダウンロードしたはいいけど忙しくて放置してところに
素敵なタイミングで以下の良エントリーがっ。

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509
※cssコメントの対応表あり

みんな、pxに対応する%を覚えて使ってんのかなぁ、すげぇなぁ。。。と思ってたけど、コメントいれちゃった方が優しいっすよね。
さっそくパクろう。

YUI 3: CSS Fontsのダウンロードや対応表

YUI 3: CSS Fonts
解凍後以下のフォルダの中にあるよ

YUI Library\yui\build\cssfonts

fonts-context.cssってなんだろ

追記
使い方間違ってたっ!!

任意のfont-sizeをYUI CSS Fontsを読み込んだあとの
bodyに指定してたので次のような事になってた。

font-familyを変更したらサイズが合わない?

[css]body{
font-family:"メイリオ", Meiryo;
font-size:93%;
}[/css]
としたら12pxにならなかった。

確認用の画象(20110424.png)をつくって、
[image]サイズチェック用画象

確認用のソースを用意して
[html]<style type="text/css">
body{
font-family:"メイリオ", Meiryo;
font-size:93%;
}
.test{
padding:20px;
position:relative;
}
.text{
position:absolute;
top:88px;
left:30px;
color:#f33;
}
</style>
</head>

<body>
<div class="test">
<p>メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
<p class="text">メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>[/html]

textを重ねてチェックしてみたら、15pxになってるぽい。
表示結果
[image]93%で15px

検索すると理由が書いてありました
YUIのfonts.css[to-R]
bodyにfont-sizeを指定するとyuifontsの指定が上書きされちゃうのね
そりゃそうだ。

上記cssを以下のように変更してチェック
[css]<style type="text/css">
body{
font-family:"メイリオ", Meiryo;
}
.test{
font-size:93%;/*←ここに移動*/
padding:20px;
position:relative;
}
.text{
position:absolute;
top:29px;
left:31px;
color:#f33;
}
</style>
</head>

<body>
<div class="test">
<p>メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
<p class="text">メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>[/css]

表示結果
[image]今度は12px

最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。