文字を太字にする場合は、bタグやstrongタグを利用する方法もあります。詳細はこちらの記事を参照してください。
CSSを利用して、HTMLページの文字の太さを変更するコードと実行結果を紹介します。
フォントのウェイトを変更して、テキスト文字を太字・ボールドにする、または細字にする場合にはfont-weightプロパティを設定します。
font-weightプロパティにより文字フォントの太さを変更できます。
font-weight: (フォントウェイト数);
または
font-weight: (キーワード);
フォントウェイト数は以下の値tとなります。
| 値 | 意味 |
|---|---|
| 100 | |
| 200 | |
| 300 | |
| 400 | normal |
| 500 | |
| 600 | |
| 700 | bold |
| 800 | |
| 900 |
| キーワード | 説明 |
|---|---|
| normal | 標準のフォントの太さです。(フォントウェイト数 400に相当します) |
| bold | |
| lighter | |
| bolder |
下記コードを記述します。
body {
font-family:"MS Gothic";
}
.bold {
font-weight: bold;
}
.bolditalic {
font-weight: bold;
font-style: italic;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="CssFontStyleWeight.css" />
</head>
<body>
<div>通常フォント ABCDE</div>
<div class="bold">ボールドフォント ABCDE</div>
<div class="bolditalic">ボールドイタリックフォント ABCDE</div>
</body>
</html>
boldクラスのスタイル設定です。テキストをボールドにします。
.bold {
font-weight: bold;
}
bolditalicクラスのスタイル設定です。テキストをボールドイタリックに設定します。
font-styleプロパティによるイタリックの設定についてはこちらの記事を参照してください。
.bolditalic {
font-weight: bold;
font-style: italic;
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
通常フォント、ボールドフォント、ボールドイタリックフォントでテキストが表示できています。
font-weightを数値で指定した場合の表示例です。
以下のCSS,HTMLファイルを作成します。
.weight100 {font-weight:100;}
.weight200 {font-weight:200;}
.weight300 {font-weight:300;}
.weight400 {font-weight:400;}
.weight500 {font-weight:500;}
.weight600 {font-weight:600;}
.weight700 {font-weight:700;}
.weight800 {font-weight:800;}
.weight900 {font-weight:900;}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="StyleFontStyle.css" />
</head>
<body>
<div class="weight100">Font Weight = 100</div>
<div class="weight200">Font Weight = 200</div>
<div class="weight300">Font Weight = 300</div>
<div class="weight400">Font Weight = 410</div>
<div class="weight500">Font Weight = 500</div>
<div class="weight600">Font Weight = 600</div>
<div class="weight700">Font Weight = 700</div>
<div class="weight800">Font Weight = 800</div>
<div class="weight900">Font Weight = 900</div>
</body>
</html>
下図の表示結果となります。フォントにより用意されているフォントウェイトの種類が違うため、フォントウェイトの値が変化しても表示内容が変わらない場合があります。
フォントウェイトが多く用意されているフォントの場合は、値によりフォントの太さが変わります。
.weight100 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 100; }
.weight200 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 200; }
.weight300 { font-family: "A P-OTF Shin Go Pr6Nd"; font-weight: 300; }
.weight400 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 400; }
.weight500 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 500; }
.weight600 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 600; }
.weight700 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 700; }
.weight800 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 800; }
.weight900 { font-family: "A P-OTF Shin Go Pr6N"; font-weight: 900; }
font-weightの値によりフォントの太さが変わっています。
(下図の実行結果と同じ表示を得るには、クライアントPCに "A P-OTF 新ゴ Pro6N" がインストールされている必要があります。)
