hail2u.net

Yahoo! UI LibraryのFonts CSS

Posted at 2006-08-14T14:49:00+09:00 in Web Design

OSのみならずブラウザにも左右されるWebにおけるフォント。多くの場合はHelvetica(WindowsではArialになる)やVerdanaなどの一般的なフォントを指定し、多少サイズをいじる程度のアプローチか、まったく無指定でユーザーに任せるといったアプローチであることと思う。徹底的に調節するとなるとものすごくツライから。Yahoo! UI Libraryで提供されているFonts CSSはそのフォント調節の手助けをしてくれるCSSファイル。

具体的な効用は、ほとんどの現行ブラウザで13ピクセルのHelveticaが基本のフォントになるというもの。つまり、OSとブラウザによる文字表示の差異をほとんど吸収してくれるという効用。

当該のCSSファイルを開いてみると、微妙に読みづらいCSSコード。よく読んでやると*property: value;というハックのみの模様。このプロパティ名の直前にアスタリスクを置くハックは寡聞にしてどこが初出かわからなかったが、ちょっと試してみたところInternet Explorer 5/6のみがすり抜けるハックっぽい。つまりInternet Explorer以外では13px、Internet Explorerではsmallが適用されるということな模様なので、いきなり13pxとか指定してるものの「Internet Explorerなんかではフォント・サイズが固定されそう！」とかいう心配は必要ない。

フォント・サイズが13ピクセルなのは英語では良いかなという感じだが、日本語には少しつらいと感じる人も多いかも。そこは自分で書くCSSの方で調節してやれば良い。emではなく%でサイズの調整はしましょうとのことだ。Fonts CSSのページには16ピクセルにするには何%を指定すれば良いかの表とかもあるので、簡単に調節できるはず。Fonts CSSそのものを編集して調節ということもできそうかなと思うかもしれないが、Internet Explorerのsmallに合わせて他のブラウザでのサイズを調節している(と思われる)ので、ちょっと難しいと思う。

なんにせよ基準がきっちりと決まるので、CSSを書くのにかかる手間がかなり省けることと思う。Yahoo! UI Libraryで併せて提供されているReset CSSも使うと良い。僕は自分で書いたのがあるので使っちゃうけど。