CSS - font-weight

概要

属性名	font-weight
値	normal \| bold \| bolder \| lighter \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900
初期値	normal
適用可能要素	すべての要素
継承	継承する
メディア	visual
アニメーション	可能

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS1	3	1	1	3.5	1.3

説明

フォントの太さを指定します。

値	説明
normal	通常の太さ。
bold	太字。
bolder	より太く。
lighter	より細く。
100-900	数値指定。100が細く、900が太い。

使用例

HTML

<div style="font-weight:normal">normal: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:bold">bold: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:bolder">bolder: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:lighter">lighter: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:100">100: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:200">200: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:300">300: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:400">400: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:500">500: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:600">600: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:700">700: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:800">800: たかが Rock'n Roll されど Rock'n Roll</div>
<div style="font-weight:900">900: たかが Rock'n Roll されど Rock'n Roll</div>

表示

normal: たかが Rock'n Roll されど Rock'n Roll

bold: たかが Rock'n Roll されど Rock'n Roll

bolder: たかが Rock'n Roll されど Rock'n Roll

lighter: たかが Rock'n Roll されど Rock'n Roll

100: たかが Rock'n Roll されど Rock'n Roll

200: たかが Rock'n Roll されど Rock'n Roll

300: たかが Rock'n Roll されど Rock'n Roll

400: たかが Rock'n Roll されど Rock'n Roll

500: たかが Rock'n Roll されど Rock'n Roll

600: たかが Rock'n Roll されど Rock'n Roll

700: たかが Rock'n Roll されど Rock'n Roll

800: たかが Rock'n Roll されど Rock'n Roll

900: たかが Rock'n Roll されど Rock'n Roll

リンク

初版：1997年7月27日、最終更新：2017年11月19日

https://www.tohoho-web.com/css/prop/font-weight.htm