font

概要

CSS の font プロパティは、font-style, font-variant, font-weight, font-size, line-height, font-family を一度に設定するためのショートハンドプロパティです。また、特定のキーワードを用いることで、要素のフォントにシステムフォントを指定することもできます。

他のショートハンド・プロパティ同様、値を指定しなかった場合には、それぞれの初期値が設定されます。結果的に、それ以前にショートハンドでないプロパティを使って指定していた値は上書きされます。

構文

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

/* システムダイアログで使用するフォント */
font: message-box;
font: icon;

/* グローバル値 */
font: inherit;
font: initial;
font: unset;

値

<'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

通常のプロパティを指定する方法以外に、キーワードを用いることで、特定のシステムフォントで代替させることもできます。

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’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar
where 
<font-variant-css21> = [normal | small-caps]

例

/* フォントサイズを 12px、行の高さを 14px、フォントファミリーを sans-serif に設定します */
p { font: 12px/14px sans-serif }

/* フォントサイズを親要素もしくは（親要素が存在しない場合には）デフォルト値の 80% に設定し、
フォントファミリーを sans-serif に設定します */
p { font: 80% sans-serif }

/* フォントの太さを bold、フォントスタイルを italic、フォントサイズを large、
フォントファミリーを serif に設定します */
p { font: bold italic large serif }

/* ウィンドウのステータスバーで使われているのと同じフォントを使います */
p { font: status-bar }

ライブサンプル

HTML Content

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

        

        <div class="setPropCont">

            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>

        </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>

CSS Content

body, input {

  font: 14px arial;

}



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

}

JavaScript Content

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

仕様

ブラウザ実装状況