【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 などの文字幅の種類を選択するプロパティです。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2024/02 | 03
- - - - 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 - -
Archive
Profile

yuki★hata

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

メールフォームはこちら

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