Style fontVariantProperty
Style Object
Definition and Usage
The fontVariant property sets or returns whether the font should be displayed in small capital letters.
This means all lowercase letters are converted to uppercase, but they will have a smaller font size compared to the rest of the text.
Syntax
Set the fontVariant property:
Object.style.fontVariant="normal|small-caps|inherit"
Return the fontVariant property:
Object.style.fontVariant
| 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:Internet Explorer 7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the font to small capital letters:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</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()">Change font</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</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()">Change font</button>
</body>
</html>
Try it Yourself »
Style Object Other Extensions