フォントの太さ

フォントの太さを指定するには、CSSの font-weight プロパティを使います。
数値もしくは名前で指定します。

ただし、使用しているフォントが対応する太さを持っている場合にのみ有効です。
フォントによっては、normal と bold しか用意されていないこともあります。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォントの太さの例</title>
    <style>
        /* 通常の太さ (normal) */
        .normal-text {
            font-weight: normal; /* または 400 */
        }

        /* 太字 (bold) */
        .bold-text {
            font-weight: bold; /* または 700 */
        }

        /* 細い (lighter) */
        .lighter-text {
            font-weight: lighter;
        }

        /* 数値で指定 */
        .weight-100 {
            font-weight: 100; /* 最も細い */
        }

        .weight-500 {
            font-weight: 500; /* normalより少し太い (セミボールドなど) */
        }

        .weight-900 {
            font-weight: 900; /* 最も太い */
        }

        /* h1要素はデフォルトで太字なので、normalで上書きすると細く見える */
        h1 {
            font-weight: normal;
        }
    </style>
</head>
<body>
    <p class="normal-text">これは通常の太さのテキストです。</p>
    <p class="bold-text">これは太字のテキストです。</p>
    <p class="lighter-text">これは親要素より細いテキストです。</p>
    <p class="weight-100">これは数値100で指定したテキストです。</p>
    <p class="weight-500">これは数値500で指定したテキストです。</p>
    <p class="weight-900">これは数値900で指定したテキストです。</p>
    <h1>これはnormalにした見出しです（通常見出しはbold）</h1>
</body>
</html>

フォントの太さ

コード

プレビュー

1件のコメント

candy への返信