フォント

目次

  1. フォントの基礎
  2. フォントファミリ
  3. フォントのスタイル
  4. スモールキャプス
  5. フォントの太さ
  6. フォントのサイズ
  7. フォントの簡略化プロパティ

フォントの基礎

フォント(font)とはデザイン、大きさなどが共通したグリフの集合のことです。グリフ(glyph)とは文字という抽象的な概念を視覚的に表した字形のことです。例えば、A A A A (様々なグリフ…)これらはどれも"A"という文字を表すグリフです。

フォントには正体、イタリック体、ボールド体、ボールドイタリック体などの書体(typeface)があります。これらの書体ごとのフォントはフォントフェイス(font face)と言います。フォントファミリ(font family)はよく似たフォントフェイスをまとめたものです。以下は、Times New Romanファミリの例です。

(図)Times New Roman, Times New Roman Bold, Times New Roman Italic, Times New Roman Bold Italic

フォントファミリ

font-familyプロパティは文字通り要素のフォントファミリを指定するプロパティです。値にはフォントファミリ名か総称ファミリ名をカンマで区切って指定します。スペースや約物を含むフォントファミリ名は引用符で括る必要があります。

総称ファミリは、指定されたフォントが見つからなかったときにユーザーエージェントの側で適当なフォントを選択させるための、フォントの総称名です。総称ファミリには以下のキーワードが指定できます。

serif
セリフ(ひげ)を持ち、線の太さに強弱のあるフォントです。Times New Roman、Century、ＭＳ Ｐ明朝、ヒラギノ明朝体などがあります。
sans-serif
セリフがなく、線の太さが均一なフォントです。Arial、Helvetica、ＭＳ Ｐゴシック、ヒラギノ角ゴシック体などがあります。
cursive
筆記体のフォントです。Comic Sans MS、Zapf-Chanceryなどがあります。
fantasy
装飾用のフォントです。Critter、Cottonwoodなどがあります。
monospace
等幅フォントです。Courier、Courier New、ＭＳ ゴシック、平成角ゴシックなどがあります。
例
body { font-family: "Times", "平成明朝", "ＭＳ Ｐ明朝", serif }

指定したフォントファミリは先に書かれているものが優先されます。この例では、ある文字について最初に"Times"で、次に"平成明朝"で、その次に"ＭＳ Ｐ明朝"で、なければserifで表示を試みます。

フォントのスタイル

font-styleプロパティは、font-familyプロパティで指定されたフォントファミリの中からこのプロパティで指定されたのスタイルを選択します。値には次のキーワードを指定します。

normal
正体にします。
italic
イタリック体にします。
oblique
オブリーク体にします。

スモールキャプス

font-variantプロパティは、font-familyプロパティで指定されたフォントファミリの中からスモールキャプスを選択するプロパティです。スモールキャプスとは小文字をやや小さい大文字のように表示することです。値には以下のキーワードを指定します。

normal
スモールキャプスにしません。
small-caps
スモールキャプスにします。

フォントの太さ

font-weightプロパティはフォントファミリの中からフォントの太さを選択します。値には"100"から"900"までの100刻みの<整数値>か、以下のキーワードを指定します。

normal
"400"に等しい。
bold
"700"に等しい。
bolder
継承されたフォントの太さよりも1段階太いフォントを選択します。そのようなフォントが見つからなければ、値を100増加させるだけでフォントは変化しません。また、継承した値が"900"のときは何もしません。
lighter
継承されたフォントの太さよりも1段階細いフォントを選択します。そのようなフォントが見つからなければ、値を100現象させるだけでフォントは変化しません。また、継承した値が"100"のときは何もしません。

フォントのサイズ

font-sizeプロパティはフォントのサイズを指定します。値には<長さ>と<パーセント値>に加えて以下の絶対サイズのキーワードが利用できます。

  1. xx-small
  2. x-small
  3. small
  4. medium
  5. large
  6. x-large
  7. xx-large

"medium"が利用者の設定したフォントサイズになります。残りのキーワードと"medium"との関係はユーザーエージェントの実装に任されています。ユーザーエージェントはデバイスの特性を考慮した、スケーリング係数の対照表をつくるべきであるとされています。

CSS 2では隣り合うキーワードどうしの比率を1:2にすることが推奨されていましたが、比率を固定することには問題があったため、この記述は削除されました。

また、次の相対サイズのキーワードも使えます。

  1. larger
  2. smaller

これらのキーワードは、親要素のフォントサイズのキーワードよりも1段階大きい、もしくは小さいキーワードを意味します。例えば、親要素が"medium"なら、その子要素の"larger"は"large"であると解釈されます。

フォントの簡略化プロパティ

fontプロパティはフォント関連プロパティの簡略化プロパティです。このプロパティはその他の簡略化プロパティと違い、指定する値の順番にルールがあります。

  1. font-styleプロパティの値 (任意)
  2. font-variantプロパティの値 (任意)
  3. font-weightプロパティの値 (任意)
  4. font-sizeプロパティの値 (必須)
  5. "/"の後にline-heightプロパティの値 (任意)
  6. font-familyプロパティの値 (必須)

1番目から3番目(フォントのスタイル、スモールキャプス、フォントの太さ)までは任意の順番で記述でき、省略することもできます。4番目(フォントサイズ)は必須で省略できません。5番目(行ボックスの高さ)は省略可能、6番目(フォントファミリ名)は省略不可能です。省略されたプロパティには初期値が使われます。

例

以下の規則は同じ内容です。

h1 {
 font-style: italic;
 font-variant: normal;
 font-weight: bold;
 font-size: 120%;
 line-height: 1.2;
 font-family: Arial, sans-serif
}
h1 {
 font: italic normal bold 120%/1.2 Arial, sans-serif
}

また、このような指定を行う代わりにシステムフォントを指定することもできます。システムフォントについては15.8 Shorthand font property: the 'font' property - Fontsを参照してください。

Information