CSS FONT

CSS FONT

font properties

  • 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

This example, which demonstrates how to set the font family of an element. Possible value could be any font family name.This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system 

    •       
                    font-family:georgia,garamond,serif;

    set the font style

    Possible values are normal, italic and oblique 

    •       
                    font-style:italic;

    Set the Font Variant

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

    •       
                    font-variant: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. 

    •       
                    font-weight:bold;
font-weight:bolder;
font-weight:500;

    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 %. 

    •       
                    font-size:20px
font-size:small;
font-size: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. 

    •       
                    font-size-adjust:0.61;

    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-expanded. 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

    All CSS Font Properties

    • fontSets all the font properties in one declaration
    • font-familySpecifies the font family for text
    • font-sizeSpecifies the font size of text
    • font-styleSpecifies the font style for text
    • font-variantSpecifies whether or not a text should be displayed in a cap effect
    • smallcaps font
    • font-weightSpecifies the weight of a font

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1