Skip to content
Related Articles

Related Articles

CSS font-variant Property
  • Last Updated : 08 Aug, 2019

The font-variant property is used to converted all lowercase letters into uppercase letters. But the converted upper letters appear too small font-size than the original uppercase letters.

Syntax:

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

Property Values:

  • normal: It has a default value. It specifies a normal font-size.

    Syntax:

    font-variant:normal;

    Example:






    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            h1 {
                color: green;
            }
              
            p.geeks {
                font-variant: normal;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksForGeeks</h1>
            <h2>font-variant:normal;</h2>
            <p class="geeks">GeeksForGeeks.</p>
            <p>It is a computer science portal for geeks.</p>
      
    </body>
      
    </html>

    Output :

  • small-caps: It is used to convert all the lowercase letter into a uppercase letters.

    Syntax:

    font-variant:small-caps;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            h1 {
                color: green;
            }
              
            p.geeks {
                font-variant: small-caps;
            }
              
            .gfg {
                font-variant: small-caps;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksForGeeks</h1>
            <h2>font-variant:small-caps;</h2>
            <p class="geeks">GeeksForGeeks.</p>
            <p class="gfg">
             It is a computer science 
             portal for geeks.
            </p>
      
    </body>
      
    </html>

    Output:

  • initial:It sets the property to its default value.

    Syntax:

    font-variant:initial;

    Example:




    <!DOCTYPE html>
    <html>
      
    <head>
        <style>
            h1 {
                color: green;
            }
              
            p.geeks {
                font-variant: initial;
            }
              
            .gfg {
                font-variant: initial;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksForGeeks</h1>
            <h2>font-variant:initial;</h2>
            <p class="geeks">GeeksForGeeks.</p>
            <p class="gfg">
             It is a computer science
             portal for geeks.
            </p>
      
    </body>
      
    </html>

    Output:

Supported Browsers: The browser supported by CSS font-variant property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Apple Safari 1.0

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :