Lynxsia IT Solution

CSS Font Shorthand

The CSS font is a shorthand property that sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font. It sets the following properties:

font-family
font-size
font-stretch
font-style
font-variant
font-weight
line-height

Syntax

The CSS font properties must follow the following rules:

It must include values for font-size and font-family
it may optionally include values for font-style, font-variant, font-weight, font-stretch, and line-height
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: [font-style font-variant-css2 font-weight font-stretch-css3] font-size[/line-height] font-family

Test Code Online

					 
        
          /* font-size/line-height font-family*/
          font: 12px/14px sans-serif;

          /* font-size font-family*/
          font: 80% sans-serif;

          /* font-weight font-style font-size font-family*/
          font: bold italic large serif;

          /* font-size font-family, fallback-font */
          font: 20px Arial, sans-serif;

          /* font-style font-variant font-weight font-size/line-height font-family, fallback-font */
          font: italic small-caps bold 12px/30px Georgia, serif;

Test Code Online

View CSS PDF Ebooks

Previous Next

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Ads

CSS Font Shorthand

CSS Font Shorthand

Syntax

Report Us

Solutions

Prices

Industries

Resources

Lynxsia IT Solutions