CSS font Property

Description

The font property is shorthand that allows you to do one of two things: you can either set up six of the most mature font properties in one line, or you can set one of a choice of keywords to adopt a system font setting.

Initial value: See individual properties
Applies to: All elements
Inherited: Yes
Media: Visual
Computed value: See individual properties
Animatable: See individual properties
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.font

Syntax

font: [ [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar

Values

<font-style>See the font-style CSS property for values.
<font-variant>See the font-variant CSS property for values.
<font-weight>See the font-weight CSS property for values.
<font-size>See the font-size CSS property for values.
<font-family>See the font-family CSS property for values.

Example

HTML

<p class="test">font: italic small-caps bold 12px / 30px courier; background-color: orange;</p> 

<p class="test2">font: caption;</p> 

<p class="test3">font: icon; </p> 

<p class="test4">font: menu; </p> 

<p class="test5">font: message-box; </p> 

<p class="test6">font: small-caption;</p> 

<p class="test7"> font: status-bar;</p>

CSS

.test { 
   font: italic small-caps bold 12px / 30px courier; 
   background-color: orange;  
} 
.test2 { 
   font: caption;  
}
.test3 { 
   font: icon;  
} 
.test4 { 
   font: menu;  
} 
.test5 { 
   font: message-box;  
} 
.test6 { 
   font: small-caption;  
} 
.test7 { 
   font: status-bar;  
}

Result