CSS｜文字の太さを変える「font-weightプロパティ」

文字の太さを変えるには「font-weightプロパティ」で指定します。値は数値で指定することも出来ますが、通常はキーワードで指定する方が一般的です。実際に表示される文字の太さは、現在使用されている「font-family」に依存する場合があり、太さのバリエーションが用意されていないフォントでは適用されません。

キーワードによる主な値と指定方法
数値による主な値と指定方法

キーワードによる主な値と指定方法

キーワードで指定する主な値は「normal（標準）」「bold（太字）」「lighter（相対的細字）」「bolder（相対的太字）」です。

normal
標準の文字の太さで、数値で指定する場合の「400」と同じ。

bold
太字の文字で、数値で指定する場合の「700」と同じ。

lighter
文字の太さが親要素よりも相対的に一段細くなります。

bolder
文字の太さが親要素よりも相対的に一段太くなります。

相対的な太さ（「lighter」「bolder」）を使用した場合は「font-family」で多くの太さのバリエーションがあっても、「 thin (100)」「 normal (400)」「 bold (700)」「 heavy (900)」の4つの太さのみが継承値として計算されます。

＜キーワード指定のCSS構文＞

/* キーワード値 */
font-weight: normal;
font-weight: bold;
/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;

例）「bold（太字）」を使った表示例

＜HTML＞

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>フォントサイズの変更</title>
<meta name="description"content="フォントの大きさと太さを変更する"/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="test-font-frame">
標準文字の表示
<div class="test-font">
太文字の表示
</div>
</div>
</body>
</html>

＜CSS＞

@charset "UTF-8";
body {
}
html {
font-size: 20px:
}
.test-font-frame {
font-weight: normal;
}
.test-font {
font-weight: bold;
}

＜表示＞

数値による主な値と指定方法

文字の太さを「数字」で指定することが出来ます。一般的には「100」「200」「300」「400」「500」「600」「700」「800」「900」「950」とフォントが持っている特定の太さを指定します。

“TrueType” や “OpenType”の可変フォントと呼ばれ、1～1000の任意の数字で指定することが出来ます。（CSS Fonts レベル4から導入）

＜数値指定のCSS構文＞

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 800;
font-weight: 900;