font-weight/太字

font-weightプロパティを使うと文字の太さを変更出来ます。

説明

 font-weightプロパティを使うとフォントを文字として表示する時の太さを設定出来ます。

font-weight説明

 太さは細かく設定出来ますが、多くのフォントには太字専用のフォントがあり、この場合は太字のフォントに切り替えられます。

 このため、太さを細かく指定しても意味がありません。

構文

 font-weightプロパティの構文は以下の通りです。

font-weight: 太さ;

 太さは以下の指定が出来ます。

【文字の太さ】
太さ 説明
normal デフォルト
bold 太字
lighter 一段階細く
bolder 一段階太く
数字 100から900で太さを指定

 多くのフォントはデフォルトか太字しかないため、殆どの場合はboldしか使いません。

 normalは<strong>タグ等で太字に設定されている時に、通常のフォントで表示したい場合等に使います。

利用例

 font-weightの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

span {
font-weight: bold;
}

文章の途中で<span>太字</span>

 上記を表示すると以下になります。

文章の途中で太字

 因みに800を指定した場合は以下になります。

文章の途中で太字

 多くの環境ではboldと同じ太さで表示されていると思います。

 300を指定した場合は以下になります。

文章の途中で太字

 多くの環境ではnormalと同じで太字になっていないと思います。

関連ページ

・ホームページ作成「フォントの変更

 フォントの太さだけでなく、種類やサイズ、色等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)