Home > 実践 Web Standards Design p.352

実践 Web Standards Design p.352

Last Modified: 2008年11月30日 11:08

このページは、実践 Web Standards Design が第 1 刷・第 2 刷から第 3 刷となる際に、仕様自体の変更によって内容を修正した分について公開しています。

戻る：サポートページトップ
前： p.129
次： p.354

11 さまざまなブラウザで文字の見栄えを揃えるCSSライブラリ

文字の見栄えを揃えるYahoo! UI Library: Fonts CSS

対応ブラウザ

Firefox：○
Opera：○
Safari：○
IE 6：○
IE 7：○

ブラウザの表示の差異を埋めるには、ブラウザの持つデフォルトスタイルシートを制作者スタイルシートで上書きする必要があります。しかし、文字の表示を揃えるには各ブラウザの実装を細かく調べる必要があるため、文字サイズを揃えるだけでも大変苦労します。

Yahoo! UI Libraryが提供するFonts CSSは、各ブラウザの差異に合わせたフォントのスタイル定義をまとめたライブラリで、これを利用することでさまざまなブラウザでの文字の見栄えを揃えることができます。

URL Yahoo! UI Library: Fonts CSS: http://developer.yahoo.com/yui/fonts/

fonts.css

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.4.1
*/

body {
    font: 13px/1.231 arial, helvetica, clean, sans-serif; /* 基本文字サイズ */
    *font-size: small; /* IE 7 およびIE 6 標準準拠モードに適用 */
    *font: x-small; /* IE 6 後方互換モードに適用 */
}

table {
    font-size: inherit;
    font: 100%;
}

pre,
code,
kbd,
samp,
tt {