Menu Home

font

osbo.com | CSS | Properties | font

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

Syntax

CSS

font: value;

JS

object.style.font = "value";

Values

<'font'> = [ [ <'font-style'> || <'font-variant'> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
<'font-style'> = normal | italic | oblique <angle>?
normal

Matches against a face that is classified as a normal face, one that is neither italic or obliqued.

italic

Matches against a font that is labeled as an italic face, or an oblique face if one does not exist.

oblique

Controls matching against an oblique face. Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant.

<angle>
deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<'font-variant'> = [normal | small-caps]
none

Sets font-variant-ligatures to none and resets all other font feature properties to their initial value.

normal

Resets all subproperties of font-variant to their inital value.

small-caps

Enables display of small capitals.

<'font-weight'> = <font-weight-absolute> | bolder | lighter
<font-weight-absolute> = [normal | bold | <number>]
normal

Same as 400.

bold

Same as 700.

<number>

Each number indicates a weight that is at least as dark as its predecessor. Only values greater than or equal to 1, and less than or equal to 1000, are valid, and all other values are invalid.

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy) 
bolder

Specifies a bolder weight than the inherited value.

lighter

Specifies a lighter weight than the inherited value.

<'font-stretch'> = normal | <percentage> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal

100%.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

ultra-condensed

50%

extra-condensed

62.5%

condensed

75%

semi-condensed

87.5%

semi-expanded

112.5%

expanded

125%

extra-expanded

150%

ultra-expanded

200%

<'font-size'> = <absolute-size> | <relative-size> | <length-percentage>
<absolute-size> = [ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size> = [ larger | smaller ]
<length-percentage> = [ <length> | <percentage> ]
<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<'line-height'> = normal | <number> | <length> | <percentage> | inherit
normal

Tells user agents to set the used value to a reasonable value based on the font of the element.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

inherit

Specifies the same value as the parent.

<'font-family'> = [ <family-name> | <generic-family> ]#
<family-name>

The name of a font family.

<generic-family>

A keyword representing a generic font.

caption

The font used for captioned controls.

icon

The font used to label icons.

menu

The font used in menus.

message-box

The font used in dialog boxes.

small-saption

The font used for labeling small controls.

status-bar

The font used in window status bars.

Examples

caption

font-family | family-name

font-family | generic-family

font-size | absolute-size

font-size | length

font-size | percentage

font-size | relative-size

font-style | italic

font-style | normal

font-style | oblique

font-variant | normal

font-variant | small-caps

font-weight | bold

font-weight | bolder

font-weight | lighter

font-weight | normal

font-weight | number

icon

line-height | length

line-height | normal

line-height | number

line-height | percentage

menu

message-box

small-caption

status-bar

JS | font-family

JS | font-size

JS | font-style

JS | font-variant

JS | font-weight

JS | line-height

JS

Internal

font-family

font-size

font-stretch

font-style

font-variant

font-weight

line-height

External

World Wide Web Consortium (W3C)