CSSのfontプロパティと各プロパティについてまとめてみたよ。キーワード指定とかご存知？（CSS おれおれ Advent Calendar 2012 – 16日目）

CSS おれおれ Advent Calendar 2012 – 16日目

そういえば割と知らないなーと思いまして。だいたいばらばらに設定しちゃうので。

文法

仕様によると、以下のように設定できます。

[ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]?
  <‘font-size’> [ / <‘line-height’> ]? <‘font-family’>
] | caption | icon | menu | message-box | small-caption | status-bar

長いのでまとめると、こんな感じ。

• 値（順序一定）
  1. スタイル系（順序不定、任意のものを利用可能）
     • font-style … スタイル
     • font-variant … 変形（CSS 2.1のもののみ）
     • font-weight … 太さ
     • font-stretch … 幅
  2. font-size … サイズ
  3. line-height … 行の高さ（省略可能）
  4. font-family … 書体
• キーワード

大きく分けて「値」を設定するパターンと、font専用の「キーワード」を設定するパターンとに分かれる事がわかります。

fontに値を設定するパターン

普通、使うのはこちらだと思います。

最小構成

値を設定するパターンで最小の記述は、サイズと書体の指定のみ、という事がわかります。

font: 12px sans-serif;

スタイル系

名前は私が勝手に付けました。

斜体にしたり太字にしたりという設定を行います。順不同で任意に省略できます。つまり全部省略しても良いですし、毎回異なる順序で記述する事も可能です。

各プロパティの設定は後述します。

fontにキーワードを指定するパターン

システムフォントと同じフォント、とする事ができます。

以下を設定できます。

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

この他に、各ブラウザーの拡張設定があるようです。

• -moz-window
• -moz-document
• -moz-desktop
• -moz-info
• -moz-dialog
• -moz-button
• -moz-pull-down-menu
• -moz-list
• -moz-field
• -webkit-control
• -webkit-mini-control
• -webkit-small-control

フォント系の個別指定

fontでまとめて指定する事も、個別に指定する事もできます。それぞれ以下に解説します。

スタイル font-style

以下の三通りです。

• normal … 立体（普通の）
• italic … イタリック体（筆記体みたいなの）
• oblique … 斜体（普通のを傾けたもの）

変形 font-variant

仕様で<font-variant-css21>とされている部分ですが、具体的には以下の二通りの値を取ります。

• normal
• small-caps

値が<font-variant>ではなく<font-variant-css21>なのは、CSS 3で拡張されたfont-variantに対応していないためです。CSS 3では上記二つ以外にも大量のパターンの値を取り得ます。

（スモールキャップ？）

ちなみに、font-variant:small-capsを指定すると、フォントが「スモールキャップ」になります。（なんのこっちゃ）　なんかよくわからんのですが、欧文で使うものみたいです。MDNの解説がわかりやすい、かな？

• font-variant – CSS | MDN

基本的には英字の小文字が「小さな大文字」で表示されるようです。

太さ font-weight

基本的には以下の二通りです。

• normal … 普通
• bold … 太字

実は他にも指定ができて、「細字」の指定もあるにはあるのですが、実装している環境は一般的にないため、この二値のみ扱えれば十分そうです。

幅 font-stretch

一文字の横幅を設定します。文字間隔letter-spacingとは異なり、文字自体が水平方向に伸縮します。

IE 9とFirefoxで実装されているそうなのですが、よくわかりませんでした。

サイズ font-size

サイズを指定します。

負数でない通常の数値（pxやemなど）を設定できますが、ブラウザーやフォントがサポートしている範囲に限ります。なお10px未満は0以外うまく動かない場合があるみたいです。

その他、文字サイズに限り以下のキーワードを与える事ができます。

• 絶対値: xx-small, x-small, small, medium, large, x-large, xx-large
• 相対値: larger, smaller

fontでは必須の指定です。

行の高さ line-height

一行を表示する高さを数値で指定します。

相対的な数値は適応対象のフォントサイズに依存します。つまり通常10pxの部分にfont-size:200%; line-height:200%;を指定すると、フォントサイズは20px、行の高さは40pxになります。

fontで設定する場合、直前にスラッシュ/を必ず記述しなければなりません。（「フォントサイズ / 行の高さ」のようになります。）

書体 font-family

フォントの書体の名前を指定します。空白を含むフォント名は引用符"で括ります。

カンマ,で区切って複数指定出来ます。その場合は先頭から順に検索し、最初にあったものを設定します。

以下のキーワードを指定する事もできます。

• serif … 明朝体 : This is a pen. これはペンです。
• sans-serif … ゴシック体 : This is apen. これはペンです。
• cursive … 手書き風 : This is apen. これはペンです。
• fantasy … 遊び心のある (playful) 文字 : This is apen. これはペンです。
• monospace … 等幅 : This is apen. これはペンです。

フォントが利用者の環境にインストールされているかどうかはわからないので、カンマ区切りの最後にキーワードを指定しておくのが良いでしょう。

以下、Appleのサイトで使われていた書体設定です。Win, Mac両方のプリインストールフォントと、末尾にキーワード指定がされている事がわかります。

font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;

fontでは必須の指定です。

おしまい

改めて見てみると、結構色々とあるもんですね。

フォント系の指定はもっともっとあるので、良ければ仕様書を眺めてみてください。

参考

• CSS Fonts Module Level 3 … 仕様
• font – CSS | MDN … Mozillaの。日本語