CSS- Fonts

In this chapter teaches you how to set fonts of a content, available in an HTML element. You can set following font properties of an element -

The font-family property is used to change the face of a font.

  • The font-style property is used to make a font italic or oblique.
  • The font-variant property is used to create a small-caps effect.
  • The font-weight property is used to increase or decrease how bold or light a font appears.
  • The font-size property is used to increase or decrease the size of a font.
  • The font property is used as shorthand to specify a number of other font properties.
  • Set the Font Family

    Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.

    Example :-

    Result

    This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

    Set the Font Style

    Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.

    Example :-

    Result

    This text will be rendered in italic style

    Set the Font Variant

    The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.

    Example :-

    Consider a simple style sheet file with a name mystyle.css having the following rules ?

    Result

    This text will be rendered as small caps

    Set the Font Weight

    The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

    Example

    Result

    This font is bold.

    This font is bolder.

    This font is 500 weight.

    Set the Font Size

    The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

    Example

    Result

    This font size is 20 pixels

    This font size is small

    This font size is large

    Set the Font Size Adjust

    The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.

    Example

    Result

    This text is using a font-size-adjust value.

    Set the Font Stretch

    The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.

    Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-exversion of the font being used.

    Example

    Result

    <

    If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used.