Easy Tutorial
❮ Event Onloadeddata Prop Fileupload Value ❯

Style fontVariant Property


Definition and Usage

The fontVariant property sets or returns whether the font should be displayed in small capital letters.

This means that all lowercase letters will be converted to uppercase, but they will be smaller in font size compared to the rest of the text.

Syntax

Set the fontVariant property:

Return the fontVariant property:

Value Description
normal Default. The font is normal.
small-caps The font is displayed in small capital letters.
inherit The value of the fontVariant property is inherited from the parent element.

Browser Support

All major browsers support the fontVariant property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Change the font to small capital letters:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<script>
function displayResult(){
    document.getElementById("p1").style.fontVariant="small-caps";
}
</script>
</head>
<body>

<p id="p1">This is some text.</p>
<p>THIS IS SOME TEXT.</p>
<br>
<button type="button" onclick="displayResult()">Modify Font</button>

</body>
</html>

❮ Event Onloadeddata Prop Fileupload Value ❯