Your Search Results

    font-weight

    概要

    font-weight は フォントのウェイト(或いは太さ)を指定する為の CSS プロパティです。

    • 初期値 normal
    • 適用対象 全要素
    • 継承 継承する
    • メディア visual
    • 計算値 数値指定の何れかの値(100、200 ... 900)、もしくは bolder、lighter による計算値

    構文

    Formal syntax: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    
    font-weight: normal
    font-weight: 700
    font-weight: inherit
    

    normal
    通常のフォントウェイトとなります。400 に相当します。多くの要素はこの値をデフォルト値として持っています。
    bold
    太字での表示となります。700 に相当します。殆どのブラウザで見出しタグや strong 要素などのデフォルトスタイルとしてこの値が指定されています。
    lighter
    フォントウェイトを継承値よりも一段階細く設定します。
    bolder
    フォントウェイトを継承値よりも一段階太く設定します。
    100, 200, 300, 400, 500, 600, 700, 800, 900
    数値によるフォントウェイトの指定。100 を一段階とする 100900 までの 9 つの値が指定できるよう、仕様書で定められています。しかし 9 種類のウェイトを持つフォントは多くなく、またブラウザがこれらの値全てを正確に反映出来ない可能性もあります。600900 までの指定不可能なウェイトが指定された場合、太字(700 相当)として解釈されます。400500 の場合は normal として、100300 は 細字として解釈されます。但し細字での表示に対応したモダンブラウザは存在しないので、100500 までが通常のウェイトで表示されるでしょう。 【訳注: 上記の理由により、フォントウェイトは 400700 の二段階のみで指定しておくのが前方互換性保持の観点から無難と言えるでしょう。normalbold でも構いません。バイト数削減が重要なケースでは前者を。分かりやすさを重視するならば後者を選択すればよいでしょう。】

    実際の表示を確認

    /* パラグラフのテキストを太字に */
    p { font-weight: bold; }
    
    /* h1 要素のフォントウェイトを、デフォルトのスタイルよりも細い 500 に */
    h1 { font-weight: 500; }
    
    /* 周囲のテキストより細字にする */
    span { font-weight: lighter; }
    

    仕様

    仕様書 策定状況 コメント
    CSS Fonts Module Level 3
    The definition of 'font-weight' in that specification.
    勧告候補 変更無し
    CSS Transitions
    The definition of 'font-weight' in that specification.
    草案 font-weight がアニメーション可能と定義された
    CSS Level 2 (Revision 1)
    The definition of 'font-weight' in that specification.
    勧告 変更無し
    CSS Level 1
    The definition of 'font-weight' in that specification.
    勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 2.0 1.0 (1.7 or earlier) 3.0 3.5 1.3
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート 1.0 1.0 (1) 6.0 6.0 3.1

    関連情報

    Document Tags and Contributors

    Contributors to this page: ethertank, teoli
    最終更新者: teoli,
    サイドバーを隠す