Javascript Reference - HTML DOM Style fontVariant Property

The font variant controls whether to display text in small capital letters or normal font.

The fontVariant property sets or gets font variant.

Browser Support


`fontVariant`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the fontVariant property:

var v = object.style.fontVariant

Set the fontVariant property:

object.style.fontVariant='normal|small-caps|initial|inherit'

Property Values

Value	Description
normal	Default. normal font.
small-caps	small capital font
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing a font variant
CSS Version	CSS1

Example

The following code shows how to set text to use a small-caps font.


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>THIS IS ANOTHER PARAGRAPH.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   w  ww. ja va 2  s .  c  om-->
    document.getElementById("myP").style.fontVariant = "small-caps";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the font variant.


<!DOCTYPE html>
<html>
<body>
<p id="myP" style="font-variant:small-caps">This is a paragraph.</p>
<button type="button" onclick="myFunction()">Return font variant</button>
<script>
function myFunction() {<!--from w w  w  . jav a2  s  . c  om-->
    console.log(document.getElementById("myP").style.fontVariant);
}
</script>
</body>
</html>

The code above is rendered as follows: