トップページの中の プロパティの中の Fのプロパティ一覧の中の font-weight

font-weight

  • 最終更新:2009年12月13日 18:03

font-weightプロパティは、フォントの太さ(重さ)を指定します。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit
初期値
normal
適用される要素
全ての要素
継承
します
パーセント値
N/A
メディア
visual

値の解説

100 - 900
9段階でフォントの太さが変化します。
100が最も細く900が最も太くなりますが、フォントファミリーに9段階の太さが無い場合や、UA(ブラウザなど)の実装によって数値を変更しても、変化が無い場合が有ります。(実際には2段階しか変化が有りません...)
normal
標準の太さ。400と同じです。
bold
太字。700と同じです。
bolder
継承された太さより1段階太くします。900の場合変化しません。
lighter
継承された太さより1段階細くします。100の場合変化しません。

font-weightのサンプル

ul li.sampleWeight01 {
  font-weight: normal;
}
ul li.sampleWeight02 {
  font-weight: bold;
}
ul li.sampleWeight03 {
  font-weight: bolder;
}
ul li.sampleWeight04 {
  font-weight: lighter;
}
ul li.sampleWeight05 {
  font-weight: 100;
}
ul li.sampleWeight06 {
  font-weight: 800;
}
<ul>
<li class="sampleWeight01">フォントの太さ。font-weight</li>
<li class="sampleWeight02">フォントの太さ。font-weight</li>
<li class="sampleWeight03">フォントの太さ。font-weight</li>
<li class="sampleWeight04">フォントの太さ。font-weight</li>
<li class="sampleWeight05">フォントの太さ。font-weight</li>
<li class="sampleWeight06">フォントの太さ。font-weight</li>
</ul>

殆ど変化が有りませんが、このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
  • フォントの太さ。font-weight
  • フォントの太さ。font-weight
  • フォントの太さ。font-weight
  • フォントの太さ。font-weight
  • フォントの太さ。font-weight
  • フォントの太さ。font-weight

このページの上部へ