フォントの太さを変更する - テキストの文字を太字にする - CSS
CSSを利用して、HTMLページの文字フォントの太さを変更するコード、テキスト文字を太字・ボールドにするコードを紹介します。
概要
ボールド(太字)の文字を表示する場合、font-weightプロパティを設定します。
font-weightプロパティにより文字フォントの太さを変更できます。
書式
font-weight: (フォントウェイト数);
または
フォントウェイト数は以下の値tとなります。
| 値 | 意味 |
|---|
| 100 | |
| 200 | |
| 300 | |
| 400 | normal |
| 500 | |
| 600 | |
| 700 | bold |
| 800 | |
| 900 | |
| キーワード | 説明 |
|---|
| normal | 標準のフォントの太さです。(フォントウェイト数 400に相当します) |
| bold | |
| lighter | |
| bolder | |
実装例1
下記コードを記述します。
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ブラウザで表示します。下図のページが表示されます。
通常フォント、ボールドフォント、ボールドイタリックフォントでテキストが表示できています。
実装例2
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" がインストールされている必要があります。)
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
