CSS Font

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Font

Common ways of manipulating font properties in CSS include the following:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

    Each is described in detail below:

    font-family

    The font-family property specifies the type of the font.

    CSS DeclarationOutput

    p {font-family: verdana;}

    Font Family Verdana.

    p {font-family: arial;}

    Font Family Arial.

    p {font-family: impact;}

    Font Family Impact.

    font-size

    The font-size property specifies the size of the font. The size can be numerical (length or percentage), or in text (possible values are "xx-large", "x-large", "large", "medium", "small", "x-small", and "xx-small").

    CSS DeclarationOutput

    p {font-size:9px;}

    Font Size 9px.

    p {font-size:150%;}

    Font Size 150%.

    p {font-size:0.8cm;}

    Font Size 0.8cm.

    p {font-size:small;}

    Font Size small.

    p {font-size:large;}

    Font Size large.

    font-weight

    The font-weight property specifies the thickness of the font. Font weight can go from 100 to 900, with 900 being the thickest. One can also specify "bold", "bolder", or "normal".

    Examples below:

    CSS DeclarationOutput

    p {font-weight: 100;}

    This is font weight 100.

    p {font-weight: 900;}

    This is font weight 900.

    p {font-weight: bold;}

    This is bold font weight.

    font-style

    The font-style property specifies whether the font is italic or oblique.

    CSS DeclarationOutput

    p {font-style: italic;}

    This is font style italics.

    font-variant

    The font-variant property specifies whether the font will be displayed in small caps. Small caps mean that all letters will be displayed in the capital case, but the font size is smaller than usual. The possible values are 'small-caps' and 'normal'. Let's look at the example below.

    With the following CSS,

    span {
      font-variant:small-caps;
    }

    the HTML code below,

    <span>initial in small caps</span> AND LATER IN LARGE CAPS.

    renders

    initial in small caps AND LATER IN LARGE CAPS.

    Next: CSS For Link




    Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact