Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style fontVariant Property

  • Last Updated : 01 Aug, 2019

The style fontVariant Property in DOM HTML is used to set the font in capital letters. This property mainly converts lowercase to uppercase letters but the letters have a small font size compared to remaining text.

Syntax:

  • It returns the fontVariant property.
    object.style.fontVariant
  • It used to set the fontVariant property.
    object.style.fontVariant = "normal|small-caps|initial|inherit"

Values:

ValueDescription
normalDefault value with normal text.
small-capsFont in small capital letters
initialSet to default value
inheritInherit property from parent element

Return Value:

  • It returns a string represents a font in small letters.

Example-1:






<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style fontVariant Property </title>
</head>
  
<body>
    <center>
        <h1 style="color:green;width:40%;"
                GeeksForGeeks 
       </h1>
        <h2>DOM Style fontVariant Property </h2>
  
        <p id="gfg">
            A computer science portal for geeks
        </p>
  
        <button type="button" onclick="geeks()">
            Submit
        </button>
  
        <script>
            function geeks() {
  
                //  Set fontVariant
                document.getElementById(
                        "gfg").style.fontVariant =
                    "small-caps";
            }
        </script>
    </center>
</body>
  
</html>

Output:

Before Click on the button:

After Click on the button:

Example-2:




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style fontVariant Property </title>
</head>
  
<body>
    <center>
        <h1 style="color:green;width:40%;"
                GeeksForGeeks 
            </h1>
        <h2>DOM Style fontVariant Property </h2>
        
        <p id="gfg">
          A computer science portal for geeks
      </p>
        
        <button type="button" onclick="geeks()">
            Submit
        </button>
  
        <script>
            function geeks() {
                
                // Set fontVariant
                document.getElementById(
                  "gfg").style.fontVariant = 
                  "all-small-caps";
            }
        </script>
    </center>
</body>
  
</html>

Output:

Before Click on the button:

After Click on the button:

Supported Browsers: The browser supported by DOM Style fontVariant property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :