font - CSS: カスケーディングスタイルシート

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

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

構成要素のプロパティ

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

構文

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

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

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

次の値を含めなければなりません。
- <font-size>
- <font-family>
次の値は任意で含めることができます。
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` and `::first-line` にも適用されます。
継承	あり
パーセンテージ	一括指定の各プロパティとして `font-size`: 親要素の font-size `line-height`: 要素自身のフォントサイズ
計算値	一括指定の各プロパティとして `font-style`: 指定値 `font-variant`: 指定値 `font-weight`: the keyword or the numerical value as specified, with `bolder` and `lighter` transformed to the real value `font-stretch`: 指定値 `font-size`: 指定通り。ただし相対的 length は絶対的 length に変換 `line-height`: パーセンテージか length を指定すると絶対的な値、それ以外は指定通り `font-family`: 指定値
アニメーションの種類	一括指定の各プロパティとして `font-style`: 個別 `font-variant`: 個別 `font-weight`: font weight `font-stretch`: font stretch `font-size`: length `line-height`: either number or length `font-family`: 個別

形式文法

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere 
<font-variant-css21> = [ normal | small-caps ]

例

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

/* フォントの大きさを 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 }

ライブサンプル

HTML

<p>
    Change the radio buttons below to see the generated shorthand and it's effect.
</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/>

CSS

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;
}

JavaScript

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();

仕様書

仕様書	状態	備考
CSS Fonts Module Level 3 font の定義	勧告候補	`font-stretch` の値の対応を追加
CSS Level 2 (Revision 1) font-weight の定義	勧告	キーワードへのサポートが追加されました
CSS Level 1 font の定義	勧告	初回定義。

ブラウザーの互換性

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`font`	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 3	Opera 完全対応 3.5	Safari 完全対応 1	WebView Android 完全対応 ≤37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 14	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0
Support for `font-stretch` values in shorthand	Chrome 完全対応 60	Edge 完全対応 79	Firefox 完全対応 43	IE 未対応なし	Opera 完全対応 47	Safari 完全対応 11	WebView Android 完全対応 60	Chrome Android 完全対応 60	Firefox Android 完全対応 43	Opera Android 完全対応 44	Safari iOS 完全対応 11	Samsung Internet Android 完全対応 8.0
System fonts	Chrome 完全対応 1	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 4	Opera 完全対応 6	Safari 完全対応 1	WebView Android 完全対応 37	Chrome Android 完全対応 18	Firefox Android 完全対応 4	Opera Android 完全対応 14	Safari iOS 完全対応 1	Samsung Internet Android 完全対応 1.0

凡例

完全対応: 完全対応
未対応: 未対応