font-weight

文字の太さを指定します。

ブラウザ

IE3 / IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

書式

要素[.class名][#id名]{ font-weight : 値; }

▲PageTop

指定できる値

値	初期値	意味
normal	○	通常の太さです。(数値で指定すると、400程度)
bold		一般的な太字の太さです。(数値で指定すると、700程度)
lighter		太さを1段階、相対的に下げます。
bolder		太さを1段階、相対的に上げます。
数値(100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900)		数値が大きければ大きいほど、太いフォントになります。
inherit		親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        font-size : large;
        font-weight : normal;
      }
      #sample2 {
        font-size : large;
        font-weight : bold;
      }
      #sample3 {
        font-size : large;
        font-weight : lighter;
      }
      #sample4 {
        font-size : large;
        font-weight : bolder;
      }
      #sample5 {
        font-size : large;
        font-weight : 600;
      }
    </style>
  </head>
  <body>
    <div id="sample1">font-weightサンプル1</div>
    <div id="sample2">font-weightサンプル2</div>
    <div id="sample3">font-weightサンプル3</div>
    <div id="sample4">font-weightサンプル4</div>
    <div id="sample5">font-weightサンプル5</div>
  </body>
</html>

表示結果

font-weightサンプル1

font-weightサンプル2

font-weightサンプル3

font-weightサンプル4

font-weightサンプル5

▲PageTop

font-weight

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

HTML

CSS