In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > fontVariant

fontVariant style property

Browser support:

Specifies or returns a variation of the specified or default fontFamily.

Syntax:

object.fontVariant;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: font-variant

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

normal

Default. Font is normal.

small-caps

Font should be displayed in small capital letters.

Default: normal.

Example HTML code 1:

This example illustrates the use of the font-variant property:

<head>
    <style>
        .normal {
            font-variant: normal;
        }
        .smallCaps {
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <span class="normal">font-variant: normal</span><br />
    <span class="smallCaps">font-variant: small-caps</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the fontVariant property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeFont (selectTag) {            
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var selectState = selectTag.options[whichSelected].text;

            var fontTest = document.getElementById ("fontTest");
            fontTest.style.fontVariant = selectState;
        }
    </script>
</head>
<body>
    <span id="fontTest">
        Sample multiline text <br />change it!
    </span>

    <br />
    <select onchange="ChangeFont (this);" size="2">
        <option selected="selected" />normal
        <option />small-caps
    </select>
</body>