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.


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: 
Takes the value of this property from the computed style of the parent element.
Default. Font is normal.
Font should be displayed in small capital letters.
Default: normal.

Example HTML code 1:

This example illustrates the use of the font-variant property:
        .normal {
            font-variant: normal;
        .smallCaps {
            font-variant: small-caps;
    <span class="normal">font-variant: normal</span><br />
    <span class="smallCaps">font-variant: small-caps</span>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the fontVariant property in JavaScript:
    <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");
   = selectState;
    <span id="fontTest">
        Sample multiline text <br />change it!

    <br />
    <select onchange="ChangeFont (this);" size="2">
        <option selected="selected" />normal
        <option />small-caps
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content