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;

数値「400」が標準文字(キーワード:normal)で、「700」が太文字(キーワード:bold)と同じです。従って「font-weight: bold;」を「font-weight: 700;」としても同じ表示になります。