Skip to content
Related Articles

Related Articles

HTML | DOM Style fontVariant Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2022

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: 

html




<!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: 

html




<!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 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 3.5
  • Apple Safari 1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!