CSS の font
プロパティは、 font-style
, font-variant
, font-weight
, font-size
, line-height
, font-family
の一括指定です。また、要素のフォントにシステムフォントを設定することもできます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font-stretch
, font-size-adjust
, font-kerning
は、 font
によって直接設定できなくても初期値に設定されます。
構文
font
プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。
font
をシステムキーワードとして指定する場合は、 caption
, icon
, menu
, message-box
, small-caption
, status-bar
のうちの一つでなければなりません。
font
を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。
- 次の値を含めなければなりません。
- 次の値は任意で含めることができます。
font-style
, font-variant
, font-weight
は font-size
よりも前になければなりません
font-variant
は CSS 2.1 で定義された値、つまり normal
及び small-caps
のみ指定できます
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
- ラベルアイコンに使用されるシステムフォント。
- メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
-
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-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 Content
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 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();
仕様書
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub | デスクトップ | モバイル |
---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
---|
基本対応 | Chrome
完全対応
1 | Edge
完全対応
12 | Firefox
完全対応
1 | IE
完全対応
3 | Opera
完全対応
3.5 | Safari
完全対応
1 | WebView Android
完全対応
あり | Chrome Android
完全対応
あり | Edge Mobile
完全対応
あり | Firefox Android
完全対応
4 | Opera Android
完全対応
あり | Safari iOS
完全対応
あり | Samsung Internet Android
完全対応
あり |
---|
System fonts | Chrome
完全対応
1 | Edge
完全対応
12 | Firefox
完全対応
1 | IE
完全対応
4 | Opera
完全対応
6 | Safari
完全対応
1 | WebView Android
?
| Chrome Android
?
| Edge Mobile
?
| Firefox Android
?
| Opera Android
?
| Safari iOS
?
| Samsung Internet Android
?
|
---|
Support for font-stretch values | Chrome
完全対応
あり | Edge
?
| Firefox
完全対応
43 | IE
?
| Opera
?
| Safari
?
| WebView Android
?
| Chrome Android
?
| Edge Mobile
?
| Firefox Android
完全対応
43 | Opera Android
?
| Safari iOS
?
| Samsung Internet Android
?
|
---|
凡例
-
完全対応
- 完全対応
-
実装状況不明
- 実装状況不明