font
The font
CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font
, the longhands font-size-adjust
and font-kerning
are also reset to their initial values.
This property is a shorthand for the following CSS properties:
The font
property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.
If font
is specified as a system keyword, it must be one of: caption
, icon
, menu
, message-box
, small-caption
, status-bar
.
If font
is specified as a shorthand for several font-related properties, then:
- it must include values for:
- it may optionally include values for:
font-style
, font-variant
and font-weight
must precede font-size
font-variant
may only specify the values defined in CSS 2.1, that is normal
and small-caps
font-stretch
may only be a single keyword value.
line-height
must immediately follow font-size
, preceded by "/", like this: "16px/3
"
font-family
must be the last value specified.
<'font-style'>
-
See the font-style
CSS property.
<'font-variant'>
-
See the font-variant
CSS property.
<'font-weight'>
-
See the font-weight
CSS property.
<'font-stretch'>
-
See the font-stretch
CSS property.
<'font-size'>
-
See the font-size
CSS property.
<'line-height'>
-
See the line-height
CSS property.
<'font-family'>
-
See the font-family
CSS property.
System font values
caption
-
The system font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon
-
The system font used to label icons.
-
The system font used in menus (e.g., dropdown menus and menu lists).
message-box
-
The system font used in dialog boxes.
small-caption
-
The system font used for labeling small controls.
status-bar
-
The system font used in window status bars.
- Prefixed system font keywords
-
Browsers often implement several more, prefixed, keywords: Gecko implements -moz-window
, -moz-document
, -moz-desktop
, -moz-info
, -moz-dialog
, -moz-button
, -moz-pull-down-menu
, -moz-list
, and -moz-field
.
Initial value | as each of the properties of the shorthand:
|
---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
---|
Inherited | yes |
---|
Percentages | as each of the properties of the shorthand:
font-size : refer to the parent element's font sizeline-height : refer to the font size of the element itself
|
---|
Computed value | as each of the properties of the shorthand:
font-style : as specifiedfont-variant : as specifiedfont-weight : the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch : as specifiedfont-size : as specified, but with relative lengths converted into absolute lengthsline-height : for percentage and length values, the absolute length, otherwise as specifiedfont-family : as specified
|
---|
Animation type | as each of the properties of the shorthand:
|
---|
p { font: 12px/14px sans-serif }
p { font: 80% sans-serif }
p { font: bold italic large serif }
p { font: status-bar }
<p>
Change the radio buttons below to see the generated shorthand and its 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/>
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();
BCD tables only load in the browser