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

今回は、フォント関連のプロパティの値を全部まとめて指定するショートハンド「fontプロパティ」を使おう。

fontショートハンドは、最小のカタチ、値の並び順など、独特のルールがありますが、一度覚えればカンタンです。

1. fontショートハンドプロパティの値
2. fontショートハンドの書き方
   1. font-variantプロパティの CSS 2.1 での値（normal, small-caps）
   2. 最小のカタチは「font-size font-family」
   3. line-height を書くなら「font-size/line-height」
   4. 残りは font-size の「前」に書く
   5. システムフォントを指定することもできます
   6. システムフォント指定は「値は1個だけ」
3. 省略した値は継承せずに「デフォルト値」になる

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 | Shorthand font property: the font property
・font - CSS | MDN
・一括指定プロパティ - CSS | MDN

fontショートハンドプロパティの値

fontプロパティの値の構文です。

fontプロパティの構文
[ [ <'font-style'> || <'font-variant(css2.1)'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | システムフォントのキーワード
構文の見かた： [ ]（角括弧）はひとまとまりの意味。||（二重バー）はすべて省略可能で順不同。?（疑問符乗算子）は省略可能で0回か1回出現。|（単一バー）は排他的な選択肢で1つだけ存在という意味です。 ＊構文についての詳細は CSSの値の定義構文 | MDN をご覧ください。

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

fontショートハンドの書き方

fontプロパティは、以下のプロパティの値をまとめて書くことができます。
・font-styleプロパティ
・font-variantプロパティ（CSS 2.1の値（normal か small-caps）のみ）
・font-weightプロパティ
・font-stretchプロパティ
・font-sizeプロパティ
・line-heightプロパティ
・font-familyプロパティ

上記のプロパティを全部指定することもできるし、最小限 font-size と font-family だけ指定して、他は省略することもできます。
ただし、省略したプロパティの値は「継承」は解除され「初期値（デフォルト値）」になるので注意が必要です。

また、上記のプロパティの値を指定するのとは別に、システムフォント（システムダイアログで使われているフォント）をフォントとして指定する機能もあります。これはキーワードを使って指定します。（詳細は記事の後半）

font-variantプロパティの CSS 2.1 での値（normal, small-caps）

font-variantプロパティは、CSS3（Fonts Module Level 3）から「ショートハンドプロパティ」になって、以下の値を一括指定するものになりました。
font-variant-capsプロパティ
font-variant-numericプロパティ
font-variant-alternatesプロパティ
font-variant-ligaturesプロパティ
font-variant-east-asianプロパティ
（これらに関しては後日記事にします）

が、fontショートハンドプロパティでは、CSS 2.1 での font-variantプロパティの値のみ指定できることになっています。ややこしいですが。

font-variantプロパティの CSS 2.1 での値は以下の2つだけです。
font-variant: normal（標準の表示）
font-variant: small-caps（スモールキャップで表示します）

スモールキャップとは、欧文フォントで「小文字」が「大文字の小文字サイズ」になっているもの。（書籍のタイトルとか、店の看板とかで使われる表現です）
ブラウザは、指定したフォントファミリーにスモールキャップがあればそれで表示し、無い場合は 大文字を縮小したものを小文字として表示します。

サンプルを作ってみました。

サンプルのソースはこちら。

<div class="mihon">
  <span style="font-variant:normal">Fonts Module (font-variant: normal)</span>
  <span style="font-variant:small-caps">Fonts Module (font-variant: small-caps)</span>
</div>
<style>
.mihon {
	font-family:'Times New Roman',Times,serif;
	font-size:1.8rem;
	line-height:1.2em;
	color:black;
	margin:0;
	border:solid 1px #ccc;
	padding:0 .5em}
.mihon span {
	display:block;
	margin:.5em 0}
</style>

Small Caps は印刷・エディトリアルの用語です。
Cap は「Capital Letter」の略で大文字のこと。「Capital」は頭文字という意味もあるので。大文字は「Upper Case」とも言います。
Low は「Lower Case」の略で小文字。
活版印刷時代には活字（金属で作った字の型）を使っていましたが、それを並べて版を作る場で、上段のケース（Upper Case）に大文字、下段のケース（Lower Case）に小文字を入れてたからだって。
下図は業界用語の「Cap & Low」「All Caps」「Small Caps」の違いです。

最小のカタチは「font-size font-family」

fontショートハンドの最小限の形は、font-size と font-family の値を「半角スペース」で区切って指定します。
font-size だけ、font-family だけの指定は不可。

順番は、必ず font-size が先、font-family が後です。

font: 1em Verdana, "Hiragino Sans", Meiryo, sans-serif

font: 80% sans-serif

この場合、他のプロパティの値は「省略」したことになり、以下のデフォルト値にリセットされます。
・line-height: normal
・font-style: normal
・font-variant（CSS 2.1の値）: normal
・font-weight: normal
・font-stretch: normal

line-height を書くなら「font-size/line-height」

line-height は font-size の直後に「/（スラッシュ）」を付けて書きます。

この size/line-height　family のカタチさえ覚えておけばOK！

font: 1em/1.6 Verdana, "Hiragino Sans", Meiryo, sans-serif

font: x-large/110% "new century schoolbook", serif

この場合、他のプロパティの値は「省略」したことになり、以下のデフォルト値にリセットされます。
・font-style: normal
・font-variant（CSS 2.1の値）: normal
・font-weight: normal
・font-stretch: normal

残りは font-size の「前」に書く

残りの font-style、font-variant（CSS 2.1の値）、font-weight、font-stretchの値は「font-size」の「前」に「半角スペース」で区切って書きます。
順不同（順番は決まってない）、どれか省略してもOK。全部なくてもOK。

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* weight | style | size | family */
font: bold italic large Palatino, serif;

/* --- | stretch | variant | size/line-height | family */
font: normal expanded small-caps 120%/120% fantasy;
/* この場合の normal は残り２つのプロパティ(font-style, font-weight)に当てはまります */

/* weight | variant | style | size/line-height | family */
font: bold small-caps oblique 16px/3 Verdana, sans-serif;

/* variant | weight | stretch | style | size/line-height | family */
font: small-caps 900 condensed italic 12pt/1.6 sans-serif;

省略した（書かなかった）プロパティの値は、以下のデフォルト値にリセットされます。（font-size と font-family は必須です）
・line-height: normal
・font-style: normal
・font-variant（CSS 2.1の値）: normal
・font-weight: normal
・font-stretch: normal

日本語フォントの場合、font-variant、font-stretch で指定できるフォントフェイスは無いので、マックスで
weight（太さ） style（イタリックにするかどうか） size/line-height　family
の指定で良いと思います。

システムフォントを指定することもできます

fontプロパティは、キーワードを1つ使って「システムフォント」も指定できます。
この場合、先ほどまで使ったプロパティの値は無しで。書きません。
（weight、style、size、line-height などはシステムフォントのものに置き換わり、親要素からの継承もしなくなります）

W3C の仕様書 には、以下のキーワードが掲がっています。

caption	The font used for captioned controls (e.g., buttons, drop-downs, etc.). キャプション付きコントロールに使われるフォント（ボタン、ドロップダウンなど）
icon	The font used to label icons. ラベルアイコンに使われるフォント
menu	The font used in menus (e.g., dropdown menus and menu lists). メニューに使われるフォント（ドロップダウンメニュー、メニューリストなど）
message-box	The font used in dialog boxes. ダイアログボックスに使われるフォント
small-caption	The font used for labeling small controls. 小さいコントロールのラベルに使われるフォント
status-bar	The font used in window status bars. ウィンドウのステータスバーに使われるフォント

Firefox は、-moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field も実装しているそうです。

Apple（Safari）は、-webkit-control, -webkit-mini-control, -webkit-small-control を実装。

とりあえず全部試してみます。

上のサンプルのソースはこちら。

<div class="mihon2">
  <span style="font:caption">font: caption（日本語の表示見本）</span>
  <span style="font:icon">font: icon（日本語の表示見本）</span>
  <span style="font:menu">font: menu（日本語の表示見本）</span>
  <span style="font:message-box">font: message-box（日本語の表示見本）</span>
  <span style="font:small-caption">font: small-caption（日本語の表示見本）</span>
  <span style="font:status-bar">font: status-bar（日本語の表示見本）</span>
  <span>----以下 moz系のキーワード-----</span>
  <span style="font:-moz-window">font: -moz-window（日本語の表示見本）</span>
  <span style="font:-moz-document">font: -moz-document（日本語の表示見本）</span>
  <span style="font:-moz-desktop">font: -moz-desktop（日本語の表示見本）</span>
  <span style="font:-moz-info">font: -moz-info（日本語の表示見本）</span>
  <span style="font:-moz-dialog">font: -moz-dialog（日本語の表示見本）</span>
  <span style="font:-moz-button">font: -moz-button（日本語の表示見本）</span>
  <span style="font:-moz-pull-down-menu">font: -moz-pull-down-menu（日本語の表示見本）</span>
  <span style="font:-moz-list">font: -moz-list（日本語の表示見本）</span>
  <span style="font:-moz-field">font: -moz-field（日本語の表示見本）</span>
  <span>----以下 webkit系のキーワード-----</span>
  <span style="font:-webkit-control">font: -webkit-control（日本語の表示見本）</span>
  <span style="font:-webkit-mini-control">font: -webkit-mini-control（日本語の表示見本）</span>
  <span style="font:-webkit-small-control">font: -webkit-small-control（日本語の表示見本）</span>
</div>
<style>
.mihon2 {
	color:black;
	margin:0;
	border:solid 1px #ccc;
	padding:0 .7em}
.mihon2 span {
	display:block;
	margin:1em 0}
</style>

システムフォント指定は「値は1個だけ」

上記のシステムフォントのためのキーワードは、先頭にある時認識されます。

例えば、下記の指定の場合、

font: menu;
font: large menu;

最初の指定は、ブラウザは「システムフォントのキーワード」と認識しますが、
2番目の指定は、値が2個なので「font-size　font-family」と認識され、「menu」と言う名前のフォントファミリーを探しちゃいます（=無効になる）。

キーワードのあとに、例えばサイズや行間などを指定したとしても、

font: menu 2em/1.6;

ブラウザはキーワードとして認識できず、fontショートハンドとしての構文も違うので無効になり、親要素のフォントの指定を継承した表示になります。
システムフォントを指定するなら「値は1個だけ」でしか認識されないということ。

ちなみに、下記のように、fontプロパティの後に 個別にサイズなどを指定しても、システムフォントのキーワードは無効になり、フォントファミリーは親要素から継承したものになります。

font: menu;
font-size: 2em;
line-height: 1.5;
font-weight: bold;
font-style: italic;
color: red

省略した値は継承せずに「デフォルト値」になる

本記事中でも何度か触れていますが、ショートハンドプロパティでは「省略した（書かなかった）」値は、「デフォルト値（初期値）」にリセットされます。（font だけじゃなくて、すべてのショートハンドのルールです）

特にフォント関連の場合は、親から継承されるのが当たり前と思っていたら、ショートハンドのお陰で 継承が解除されてリセットされるので要注意。
ボールドのままでいいのに、ショートハンド使ったら ノーマルに戻ってた。なんてことが起こります。

また、W3C の仕様書によると、ショートハンドで使えるプロパティだけでなく、
font-size-adjustプロパティ
font-kerningプロパティ
font-language-overrideプロパティ
の値もデフォルト値に戻るんだそうです。
（これらのプロパティは近日中に記事にします）

ということで、fontショートハンドプロパティは、
・<body>要素
・<h1> <h2> <h3>などのヘディング要素
とかに限定して使って、ほかの<body>の子孫要素には使わないほうが無難。
子孫の要素は、ショートハンドではなく個別のプロパティで、変えたいところだけピンポイントで変えたほうが、面倒が無いです。

次回予告

次回は @font-face規則で 外部のフォントデータを読み込んだり、システム内のフォントデータを呼び出したりしてみよう。
ウェブフォント と呼ばれる外部フォントの組み込みも コレを使います。

関連記事

• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ
• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【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