MENU
  1. ホーム
  2. CSS
  3. font-weightプロパティ

font-weightプロパティ

CSS
2023.07.14

font-weightは、フォントの太さを指定できる
プロパティになり、9種類の太さが指定できます。

しかし、ブラウザ上では2種類(通常・太文字)の
表現しかできないことがほとんどです。

※数値が高いほど太文字

font-weightに関しての図
font-weightプロパティ
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>フォントウェイトについて</title>
    <link rel="stylesheet" href="./main.css" />
</head>
<body>
    <ul>
        <li>font-weight : normal</li>
        <li class="font-bold">font-weight : bold</li>
        <li class="font-w100">font-weight : 100</li>
        <li class="font-w200">font-weight : 200</li>
        <li class="font-w300">font-weight : 300</li>
        <li class="font-w400">font-weight : 400</li>
        <li class="font-w500">font-weight : 500</li>
        <li class="font-w600">font-weight : 600</li>
        <li class="font-w700">font-weight : 700</li>
        <li class="font-w800">font-weight : 800</li>
        <li class="font-w900">font-weight : 900</li>
    </ul>
</body>
</html>
.bold {font-weight: bold;}
.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w600 {font-weight: 600;}
.w700 {font-weight: 700;}
.w800 {font-weight: 800;}
.w900 {font-weight: 900;}
出力結果
  • font-weight : normal
  • font-weight : bold
  • font-weight : 100
  • font-weight : 200
  • font-weight : 300
  • font-weight : 400
  • font-weight : 500
  • font-weight : 600
  • font-weight : 700
  • font-weight : 800
  • font-weight : 900

[normal]は、font-weightの400
[bold]は、font-weightの700

CSS