CSS font shorthand property

The CSS font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family.

CSS property font

CSS version: CSS 2.1
Value: [ [ font-style || font-variant || font-weight ]? font-size [/line-height]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial: see individual properties
Applies to: all elements
Inherited: yes

font values

Few points to note:

  1. First three values are optional (font-style, font-variant, font-weight). If not specified, these take normal value.
  2. line-height is also optional
  3. font-family can have multiple comma separated values to have fall back fonts families. In case first font-family is not available, next one is taken and so on.

Some font shorthand values:

p { font: 12px/14px sans-serif; }
p { font: 80% sans-serif; }
p { font: normal small-caps bold 12px/14px sans-serif; }
Valid values for system predefined fonts. Note that system fonts may only be set as a whole.
captionThe font used for captioned controls (e.g., buttons, drop-downs, etc.).
iconThe font used to label icons
menuThe font used in menus (e.g., dropdown menus and menu lists).
message-boxThe font used in dialog boxes.
small-captionThe font used for labeling small controls.
status-barThe font used in window status bars.

font shorthand example

In the following code, CSS property font can be changed to the following values
  • 12px/14px sans-serif
  • 12px/18px sans-serif
  • 80% sans-serif
  • 100% sans-serif
  • normal small-caps bold 12px/14px sans-serif
  • caption
  • icon
  • menu
  • message-box
  • small-caption
  • status-bar
<style type="text/css">
div {
  width: 100px;
  font: 12px/14px sans-serif;
}
</style>
<div>This is sample text to test font shorthand property</div>
font refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments