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:
font = [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ] ? <'font-size'> [ / <'line-height'> ] ? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar <font-variant-css2> = normal | small-caps <font-stretch-css3> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
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;
}
const textAreas = document. getElementsByClassName ( "curCss" ) ;
function getProperties ( ) {
return (
` ${ getCheckedValue ( "font_style" ) } ` +
` ${ getCheckedValue ( "font_variant" ) } ` +
` ${ getCheckedValue ( "font_weight" ) } ` +
` ${ getCheckedValue ( "font_size" ) } ` +
` ${ getCheckedValue ( "line_height" ) } ` +
` ${ getCheckedValue ( "font_family" ) } `
) ;
}
function getCheckedValue ( radioName ) {
const radios = document. forms[ 0 ] . elements[ radioName] ;
for ( let i = 0 ; i < radios. length; i++ ) {
if ( radios[ i] . checked) {
const curElemName = ` input_ ${ radioName} ` ;
const curElem = document. getElementById ( curElemName) ;
curElem. value = radios[ i] . value;
return radios[ i] . value;
}
}
}
function setCss ( ) {
injectCss ( getProperties ( ) ) ;
}
function injectCss ( cssFragment ) {
const old = document. body. getElementsByTagName ( "style" ) ;
if ( old. length > 1 ) {
old[ 1 ] . parentElement. removeChild ( old[ 1 ] ) ;
}
css = document. createElement ( "style" ) ;
css. textContent = ` .fontShortHand{font: ${ cssFragment} } ` ;
document. body. appendChild ( css) ;
}
setCss ( ) ;
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.