ほんっとにはじめての HTML5 と CSS3

フォントのウェイトを指定するには font-weightプロパティを使います。

フォントのウェイトとは、重さじゃなくて「文字の太さ」。
白地に黒の文字だったら、その黒の分量の違い。文字の線の太さのことです。

1. font-weightプロパティの値
   1. normal, bold
   2. 100, 200, 300, 400, 500, 600, 700, 800, 900
   3. lighter, bolder

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント（書体）を指定しよう

【26-2】font-sizeプロパティでフォントのサイズを指定しよう

【26-3】font-weightでフォントのウェイト（太さ）を指定しよう　←今日はココ

【26-4】font-stretch で condensed などの文字幅を選択しよう

【26-5】font-styleプロパティでフォントを斜体に指定しよう

【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう

【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font - CSS | MDN

font-weightプロパティの値

font-weightプロパティの値には、いろいろなキーワードが用意されています。

font-weightプロパティの値
キーワード	normal, bold normalがデフォルト値で font-weight: 400 と同じ bold は font-weight: 700 と同じ
シーケンス キーワード	100, 200, 300, 400, 500, 600, 700, 800, 900
相対的 キーワード	lighter, bolder 親要素から継承されたウェイトを相対的に軽く・重くします
グローバル値	font-weight: inherit; 親のfont-weightの値を継承（コレ書かなくても継承するけど） font-weight: initial; 継承した親の font-weightの値を解消しデフォルト値に戻す font-weight: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

normal, bold

font-weight: normal が通常のウェイト。ブラウザのデフォルト値です。
font-weight: 400 に相当するウェイトです。

font-weight: bold は、太字のフォントウェイト。
font-weight: 700 に相当するウェイトです。

コンピュータで使用できるフォントには、たいていは ノーマル用（通常の太さ）とボールド（太めの文字）の2種類用意されています。（無いのもあるけど）
normal と bold だけがあるフォントでは、100-500 は normal、600-900 なら bold のフォントが表示されます。

ちなみに、<b>要素を使うと、ブラウザのデフォルトスタイルは font-weight: bold になります。

100, 200, 300, 400, 500, 600, 700, 800, 900

100が最も細く、そこから段階的に太くなって 900が一番太いウェイトです。
各数値のウェイトは、だいたい下記のようなウェイト名に相当するそうです。

キーワード	一般的なウェイト名
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (Regular、Book、Roman)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

ちょっと実験してみます。
フォントファミリーの中に適切なウェイトがなければ表示されないので、下のサンプルは Google Fonts の Montserrat を使っています（100〜900まで全部あるので）。

上のサンプルのソースです。

<div class="mihon">
  <span style="font-weight:100">font-weight:100</span>
  <span style="font-weight:200">font-weight:200</span>
  <span style="font-weight:300">font-weight:300</span>
  <span style="font-weight:400">font-weight:400</span>
  <span style="font-weight:500">font-weight:500</span>
  <span style="font-weight:600">font-weight:600</span>
  <span style="font-weight:700">font-weight:700</span>
  <span style="font-weight:800">font-weight:800</span>
  <span style="font-weight:900">font-weight:900</span>
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
.mihon {
	font-family:Montserrat,sans-serif;
	font-size:2rem;
	line-height:1.2em;
	color:black;
	margin:0 0 2em;
	border:solid 1px #ccc;
	padding:0 .7em}
.mihon span {
	display:block;
	margin:.5em 0}
</style>

フォントファミリーを無指定（ブラウザデフォルト）にしたら こんなかんじ。
ブラウザデフォルトのフォントファミリーに normal と bold しか無ければ、100〜500 が normal、600〜900 が bold で表示されます。
400, 700, 900 のウェイトがあるなら、100〜500 が 400（normal）で、600〜700 が 700（bold）で、800〜900が 900 で表示するそうです。

ちなみに、Mac OS El Capitan からのヒラギノ角ゴシック（'Hiragino Sans'）は、ウェイトが W1 〜 W9 までの9段階（100〜900相当）用意されています。
それより前は W3, W6, W8（300, 600, 800）だったので画期的です。

lighter, bolder

これは相対的な値です。
font-weight: lighter で、親から継承したウェイトを軽く（細く）し、
font-weight: bolder では重く（太く）します。

親から継承した値によって、lighter、bolder は以下の表の値になるそうです。

継承した値	bolder	lighter
100〜300	400	100
400〜500	700	100
600〜700	900	400
800〜900	900	700

これも、使っているフォントファミリーに 100, 400, 700, 900相当のウェイトが無ければ近いものに置き換えられます。
normal と bold しか無いフォントファミリーなら、normal（400相当）に font-weight: bolder を使えば bold（700相当）になり、bold に font-weight: lighter を使えば normal になるということですね。

使ってみます。
<span>要素を入れ子にし、一番外側には font-weight: bold を指定しています。
そのすぐ内側の <span>要素は font-weight: lighter を、さらに内側には font-weight: bolder を指定しました。

<div class="mihon3">
  <span style="font-weight:bold">
  font-weight:bold の指定
    <span style="font-weight:lighter">
    font-weight:lighter の指定
      <span style="font-weight:bolder">
      font-weight:bolder の指定
      </span>
    </span>
  </span>
</div>

プレビューはこちら。

次回予告

次回は、font-stretchプロパティを使います。
これはフォントファミリーの中の condensed などの文字幅の種類を選択するプロパティです。

関連記事

• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう
• 【26-4】font-stretch で condensed などの文字幅を選択しよう
• 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
• 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
• 【26-1】font-familyプロパティでフォント（書体）を指定しよう
• 【25-3】クリッピングに便利！ shape-outside と shape-margin
• 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
• 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
• 【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）
• 【23-2】重なり順のルールと 新しいスタックコンテキストができる条件