CSS Font - 11 Properties and its Values (Reference)

Tech:
Css
Since:
1 year ago
Views:
3

The CSS font properties and values are used to set the font properties of an element. It is one of the most important properties in CSS.

font

A shorthand property for font-* properties.

font: style variant weight size/line-height family;
font: caption;
font: icon;
font: menu;
font: message-box;
font: small-caption;
font: status-bar;
font: initial;
font: inherit;

font-family

Specifies the font family for text.

font-family: family-name;
font-family: generic-family;
font-family: initial;
font-family: inherit;

font-size

Specifies the font size of text.

font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

font-style

Specifies the font style for text.

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: initial;
font-style: inherit;

font-weight

Specifies the weight of a font.

font-weight: bold;
font-weight: bolder;

font-feature-settings

Allows control over advanced typographic features in OpenType fonts.

font-feature-settings: normal;
font-feature-settings: feature-value;

font-kerning

Controls the usage of the kerning information (how letters are spaced).

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

font-size-adjust

Preserves the readability of text when font fallback.

font-size-adjust : number;
font-size-adjust : none;
font-size-adjust : initial;
font-size-adjust : inherit;

no chrome support
no safari support

font-stretch

Selects a normal, condensed, or expanded face from a font family.

font-stretch : ultra-condensed;
font-stretch : extra-condensed
font-stretch : condensed;
font-stretch : semi-condensed;
font-stretch : normal;
font-stretch : semi-expanded;
font-stretch : expanded;
font-stretch : extra-expanded;
font-stretch : ultra-expanded;
font-stretch : initial;
font-stretch : inherit;

font-variant

Specifies whether or not a text should be displayed in a small-caps font.

font-variant: normal;
font-variant: small-caps;
font-variant: initial;
font-variant: inherit;

font-variant-caps

Controls the usage of alternate glyphs for capital letters.

font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: initial;
font-variant-caps: inherit;
font-variant-caps: unset;