フォント関連のプロパティを設定するショートハンド

CSS - font

概要

CSSプロパティ「font」は、フォントを指定することができるショートハンドです。指定できるプロパティは以下の通りで、指定する順序が決まっています(1~3までは順不同)。

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size 指定必須
  5. line-height
  6. font-family 指定必須
<p class="font">
都道府県は、北海道、青森県、岩手県、宮城県、秋田県、山形県、福島県、茨城県、栃木県、群馬県、埼玉県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font {
  font: 1em "MS 明朝", serif;
}
</style>

値の指定方法

{ font: <font-size> <font-familiy>} 必須パターンのみ
{ font: (<font-style> <font-variant> <font-weight>この中は順不同) <font-size> <line-height> <font-family>}

値の順序と必須項目があることに注意してください。

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする

使用例

いくつか異なった値を指定した時の表示を確認してみましょう

<p>※必須値のみ</p>
<p class="font">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<p>※必須値 + font-style</p>
<p class="font-style">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<p>※必須値 + font-style + font-variant</p>
<p class="font-variant">abcdefgABCDEFG</p>
<p>※必須値 + font-style</p>
<p class="font-style">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<style>
.font {
  font: 1em "MS 明朝", serif;
}
.font-style {
  font: italic 1em "MS 明朝", serif;
}
.font-variant {
  font: italic small-caps 1em "MS 明朝", serif;
}
</style>

仕様書

関連CSSプロパティ