【26-3】font-weightでフォントのウェイト(太さ)を指定しよう

最終更新日:2018年03月31日  (初回投稿日:2018年03月17日)

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

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

本日のINDEX
  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まで全部あるので)。

font-weight:100 font-weight:200 font-weight:300 font-weight:400 font-weight:500 font-weight:600 font-weight:700 font-weight:800 font-weight: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 で表示するそうです。

font-weight:100 font-weight:200 font-weight:300 font-weight:400 font-weight:500 font-weight:600 font-weight:700 font-weight:800 font-weight: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-weight:bold の指定 font-weight:lighter の指定 font-weight:bolder の指定

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2018/09 | 10
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.