![YUI 3: CSS Fonts [image]YUI 3: CSS Fonts](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110424_1.png)
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]サイズチェック用画象](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110424_2.png)
確認用のソースを用意して
[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になってるぽい。
表示結果
![93%で15pxぽい [image]93%で15px](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110424_3.png)
検索すると理由が書いてありました
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]
表示結果
![今度は12px [image]今度は12px](http://blog.sakurachiro.com/wp-content/uploads/2011/04/20110424_4.png)
最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。