font
====

**`font`** は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

試してみましょう
--------

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 `font` によって直接設定できない個別指定の `font-size-adjust`, `font-kerning` も初期値に設定されます。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `font-family`
* `font-size`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-weight`
* `line-height`
構文
--

`font` プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

`font` をシステムキーワードとして指定する場合は、 `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar` のうちの一つでなければなりません。

`font` を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

* 次の値を含めなければなりません。
    + `<font-size>`
    + `<font-family>`
* 次の値は任意で含めることができます。
    + `<font-style>`
    + `<font-variant>`
    + `<font-weight>`
    + `<font-stretch>`
    + `<line-height>`
* `font-style`, `font-variant`, `font-weight` は `font-size` よりも前になければなりません。
* `font-variant` は CSS 2.1 で定義された値、つまり `normal` および `small-caps` のみ指定できます。
* `font-stretch` は単一のキーワード値のみを指定することができます。
* `line-height` は `font-size` の直後に、 "/" で区切って、 "`16px/3`" のように指定します。
* `font-family` は指定される最後の値である必要があります。
### 値

`<'font-style'>`

`font-style` プロパティを参照。

`<'font-variant'>`

`font-variant` プロパティを参照。

`<'font-weight'>`

`font-weight` プロパティを参照。

`<'font-stretch'>`

`font-stretch` プロパティを参照。

`<'font-size'>`

`font-size` プロパティを参照。

`<'line-height'>`

`line-height` プロパティを参照。

`<'font-family'>`

`font-family` プロパティを参照。

#### システムフォント値

`caption`

キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。

`icon`

ラベルアイコンに使用されるシステムフォント。

`menu`

メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。

`message-box`

ダイアログボックスに使われるシステムフォント。

`small-caption`

小さいコントロールのラベルに使われるシステムフォント。

`status-bar`

ウィンドウのステータスバーに使われるシステムフォント。

接頭辞付きのシステムフォントキーワード

ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, `-moz-field` を実装しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `font-style`: `normal`
* `font-variant`: `normal`
* `font-weight`: `normal`
* `font-stretch`: `normal`
* `font-size`: `medium`
* `line-height`: `normal`
* `font-family`: ユーザエージェントに依存
 |
| 適用対象 | すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | あり |
| パーセント値 | 一括指定の次の各プロパティとして* `font-size`: 親要素の font-size に対する相対値
* `line-height`: 要素自身のフォントサイズに対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `font-style`: 指定通り
* `font-variant`: 指定通り
* `font-weight`: 指定された通りのキーワードまたは数値であり、 `bolder` および `lighter` は実数に変換される
* `font-stretch`: 指定通り
* `font-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `line-height`: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り
* `font-family`: 指定通り
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `font-style`: by computed value type; `normal` animates as `oblique 0deg`
* `font-variant`: 離散値
* `font-weight`: フォントの太さ
* `font-stretch`: フォントの伸長値
* `font-size`: length
* `line-height`: 数値または長さ
* `font-family`: 離散値
 |

形式定義
----
```

font =   
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]  |  
  <system-family-name>                                  
  
<font-variant-css2> =   
  normal      |  
  small-caps    
  
<font-stretch-css3> =   
  normal           |  
  ultra-condensed  |  
  extra-condensed  |  
  condensed        |  
  semi-condensed   |  
  semi-expanded    |  
  expanded         |  
  extra-expanded   |  
  ultra-expanded     
  
<system-family-name> =   
  caption        |  
  icon           |  
  menu           |  
  message-box    |  
  small-caption  |  
  status-bar       
  
```

例
-

### フォントのプロパティの設定


```css
/\* フォントの大きさを 12px に設定し、行の高さを 14px にする。
 フォントファミリは sans-serif に設定する \*/
p {
  font: 12px/14px sans-serif;
}

/\* フォントの大きさを親要素の 80% または既定値
 (親要素がない場合) に設定する。
 フォントファミリは sans-serif に設定する \*/
p {
  font: 80% sans-serif;
}

/\* フォントの太さを太字に、
 フォントスタイルを斜体に、
 フォントの大きさを large に、
 フォントファミリーは serif に設定する \*/
p {
  font: bold italic large serif;
}

/\* ウィンドウのステータスバーと同じフォントに設定する \*/
p {
  font: status-bar;
}
```

### ライブ例
```

<p>
  下のラジオボタンを変更すると、生成された一括指定とその効果が確認できます。
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
 type="radio"
 id="font-style-none"
 name="font\_style"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="font-style-none">none</label><br />
      <input
 type="radio"
 id="font-style-normal"
 name="font\_style"
 value="normal"
 onchange="setCss()" />
      <label for="font-style-normal">normal</label><br />
      <input
 type="radio"
 id="font-style-italic"
 name="font\_style"
 value="italic"
 onchange="setCss()" />
      <label for="font-style-italic">italic</label><br />
      <input
 type="radio"
 id="font-style-oblique"
 name="font\_style"
 value="oblique"
 onchange="setCss()" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
 type="radio"
 id="font-variant-none"
 name="font\_variant"
 checked=""
 value=" "
 onchange="setCss()" />
      <label for="font-variant-none">none</label><br />
      <input
 type="radio"
 id="font-variant-normal"
 name="font\_variant"
 value="normal"
 onchange="setCss()" />
      <label for="font-variant-normal">normal</label><br />
      <input
 type="radio"
 id="font-variant-small-caps"
 name="font\_variant"
 value="small-caps"
 onchange="setCss()" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input
 type="radio"
 id="font-weight-none"
 name="font\_weight"
 value=""
 onchange="setCss()" />
      <label for="font-weight-none">none</label><br />
      <input
 type="radio"
 id="font-weight-normal"
 checked=""
 name="font\_weight"
 value="400"
 onchange="setCss()" />
      <label for="font-weight-normal">normal</label><br />
      <input
 type="radio"
 id="font-weight-bold"
 name="font\_weight"
 value="700"
 onchange="setCss()" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input
 type="radio"
 id="font-size-12px"
 name="font\_size"
 value="12px"
 onchange="setCss()" />
      <label for="font-size-12px">12px</label><br />
      <input
 type="radio"
 id="font-size-16px"
 name="font\_size"
 value="16px"
 checked=""
 onchange="setCss()" />
      <label for="font-size-16px">16px</label><br />
      <input
 type="radio"
 id="font-size-24px"
 name="font\_size"
 value="24px"
 onchange="setCss()" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
 type="radio"
 id="line-height-none"
 name="line\_height"
 checked=""
 value=""
 onchange="setCss()" />
      <label for="line-height-none">none</label><br />
      <input
 type="radio"
 id="line-height-1.2"
 name="line\_height"
 value="/1.2"
 onchange="setCss()" />
      <label for="line-height-1.2">1.2</label><br />
      <input
 type="radio"
 id="line-height-3"
 name="line\_height"
 value="/3"
 onchange="setCss()" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
 type="radio"
 id="font-family-courier"
 name="font\_family"
 checked=""
 value="courier"
 onchange="setCss(5,'courier')" />
      <label for="font-family-courier">courier</label><br />
      <input
 type="radio"
 id="font-family-serif"
 name="font\_family"
 value="serif"
 onchange="setCss()" />
      <label for="font-family-serif">serif</label><br />
      <input
 type="radio"
 id="font-family-sans-serif"
 name="font\_family"
 value="sans-serif"
 onchange="setCss()" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
 type="radio"
 id="font-family-arial"
 name="font\_family"
 value="arial"
 onchange="setCss()" />
      <label for="font-family-arial">Arial</label><br />
      <input
 type="radio"
 id="font-family-monospace"
 name="font\_family"
 value="monospace"
 onchange="setCss()" />
      <label for="font-family-monospace">monospace</label><br />
      <input
 type="radio"
 id="font-family-cursive"
 name="font\_family"
 value="cursive"
 onchange="setCss()" />
      <label for="font-family-cursive">cursive</label><br />
      <input
 type="radio"
 id="font-family-fantasy"
 name="font\_family"
 value="fantasy"
 onchange="setCss()" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
 type="radio"
 id="font-family-system-ui"
 name="font\_family"
 value="system-ui"
 onchange="setCss()" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_font\_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input\_line\_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input\_font\_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">This is some sample text.</div>
<br /><br /><br /><br /><br /><br />
```


```
body,
input {
  font: 14px arial;
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}
```


```
var textAreas = document.getElementsByClassName("curCss"),
  shortText = "",
  getCheckedValue,
  setCss,
  getProperties,
  injectCss;

getProperties = function () {
  shortText =
    getCheckedValue("font\_style") +
    " " +
    getCheckedValue("font\_variant") +
    " " +
    getCheckedValue("font\_weight") +
    " " +
    getCheckedValue("font\_size") +
    getCheckedValue("line\_height") +
    " " +
    getCheckedValue("font\_family");

  return shortText;
};

getCheckedValue = function (radio\_name) {
  oRadio = document.forms[0].elements[radio_name];
  for (var i = 0; i < oRadio.length; i++) {
    if (oRadio[i].checked) {
      var propInput = "input\_" + radio_name,
        curElemName = "input\_" + radio_name,
        curElem = document.getElementById(curElemName);
      curElem.value = oRadio[i].value;

      return oRadio[i].value;
    }
  }
};

setCss = function () {
  getProperties();
  injectCss(shortText);
};

injectCss = function (cssFragment) {
  old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
  document.body.appendChild(css);
};

setCss();
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-style`
* `font-weight`
* 基本的なテキストとフォントの装飾