ywork2020.com

Title

文字の太さを指定する

目次 (INDEX)

font weightとは

font weight とは次の2つの単語からなるプロパティです。
font
読み: フォント
意味: 書体、活字
weight
読み: ウェイト
意味: 重量、目方

目次に戻る

font-weightの概要

このプロパティはテキストの太さを設定するために使用します。

設定値には定められたキーワードを使用するか、1から1000までの実数値を使うことができます。

キーワードの「normal」が数値で指定した場合の400となり、「bold」が700と同等の太さとなります。

ただし、フォントの太さはフォントそのものにも依存しており、フォントによって対応している太さが違うので、 実際に使ってみないと、イメージどおりのスタイルになるのかは分かりません。

実機サンプルとサンプルコード

このプロパティの設定値は、単一のキーワードか数値を指定することができます。

構文

セレクター{font-weight: 設定値;}

初期値: normal

初期値はnormalですが、このプロパティは特別な指定がない場合、親要素のスタイルを継承します。 つまり親要素がboldになっていれば子要素も指定がない限り、bold値を継承します。

ここからのサンプルでは、親要素の値をnormalに指定した状態で表示しています。

div要素
サンプルテキスト
div{font-weight: normal;}

目次に戻る

bold

boldキーワードは、テキストを太文字で表示します。

div要素
サンプルテキスト
div{font-weight: bold;}

目次に戻る

lighter

lighterキーワードは、親要素の値を基準にしてテキストを一段階、細字に修正して表示します。

div要素
サンプルテキスト
div{font-weight: lighter;}

目次に戻る

bolder

bolderキーワードは、親要素の値を基準にしてテキストを一段階、太字に修正して表示します。

div要素
サンプルテキスト
div{font-weight: bolder;}

目次に戻る

font-weight: 数値;

font-weightを数値で指定する場合は、1以上1000以下の実数値を使うことができます。 ただしブラウザやfont-familyの対応によって、再現度は違ってきます。 また、CSSの古いバージョンでは100, 200, 300, 400, 500, 600, 700, 800, 900の固定した数値で指定していましたので、今でもこの仕様の まま利用することも少なくありません。

div要素
font-weight: 100;
div要素
font-weight: 400;
div要素
font-weight: 700;
div{font-weight: 400;}

目次に戻る

グローバル値

font-weightプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。 このサンプルでは継承についての検証を行う為に、親要素のにbold値を設定します。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値のnormalに戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
div要素
font-weight: inherit;
親要素値の継承
div要素
font-weight: initial;
初期値に戻す
div要素
font-weight: unset;
継承の初期値にリセット
div{font-weight: グローバル値;}

目次に戻る

プロパティについての補足

  • すべての要素に適用可能
  • 親要素の値を継承する

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

font-weight: normal;

font-weight: bold;

font-weight: bolder;

font-weight: lighter;

font-weight: 100;

font-weight: 400; (normal)

font-weight: 700; (bold)

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る