font

CSSでは、フォント関連の設定を変更することができます。

本ページでは、fontプロパティについて説明します。

fontプロパティとは

fontプロパティを使うと、フォント関連の設定を一括で行うことができます。例えば、フォントの種類を変更したり、フォントサイズを変更したりできます。

fontの定義は、以下のとおりです。

【fontの定義】
値	font-style \|\| font-variant-css21 \|\| font-weight \|\| font-stretch font-size /line-height font-family または、 caption \| icon \| menu \| message-box \| small-caption \| status-bar
初期値	font-style:normal font-variant-css21:normal font-weight:normal font-stretch:normal font-size:medium line-height:normal font-family:ブラウザで決定
適用対象	すべての要素
継承	する

値で、「または、」の上のパターンを使う時は、赤字のfont-sizeとfomt-familyは必須です。

以下は、fontで使える値と説明です。

font-style: イタリック体や斜体を指定します。
font-variant-css21: small-capsを指定すると、すべて大文字に変換されます。ただし、元々が大文字以外の文字(変換された文字)は、サイズが小さく表示されます。デフォルトはnormalで、変換しません。
font-weight: フォントの太さを指定します。
font-stretch: フォントの横幅を狭くしたり、広くしたりできます。
font-size: フォントのサイズを指定します。
/line-height: 行の高さを指定します。スラッシュ(/)を付けて記述が必要です。
font-family: フォントの種類(フォントファミリ)を指定します。
caption: キャプション付きのコントロールに使用されるフォントを使います(ボタン、ドロップダウンなど)。
icon: アイコンのラベルに使用されるフォントを使います。
menu: メニューで使用されるフォントを使います(ドロップダウンメニューやメニューリストなど)。
message-box: ダイアログボックスで使用されるフォントを使います。
small-caption: 小さなコントロールのラベル付けに使用されるフォントを使います。
status-bar: ウィンドウのステータスバーで使用されるフォントを使います。

font-style、font-weight、font-size、line-height、font-familyについては、各リンク先をご参照ください。

利用例は、以下のとおりです。

【fontの利用例】

body {
  font: normal normal normal normal 1.1em /1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

上記は、以下のように表示されます。

フォントサイズはデフォルトから1.1倍、行の高さはフォントサイズの1.8倍、フォントファミリは左から優先で使えるものを表示しています。

また、font-sizeとfont-family以外は必須ではないため、以下のように記述しても同じです。

【fontの利用例(必須ではなくてデフォルトから変更しないものは省略)】

body {
  font: 1.1em /1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

以下は、small-capsの利用例です。

【small-capsの利用例】

body {
  font: small-caps 1.1em "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

HTMLではp要素で、「This is a pen.」と記述されているとします。この場合、以下のように表示されます。

すべて大文字になっています。また、元々大文字だったT以外の文字は、少し小さく表示されています。

以下は、small-captionの利用例です。

【small-captionの利用例】

body {
  font: small-caption;
}

上記は、以下のように表示されます。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
font	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
font	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。