## JavaScript DOM Style fontVariant Property
The `fontVariant` property sets or returns whether a text should be displayed in a small-caps font.
When a font is set to `small-caps`, all lowercase letters are converted to uppercase. However, these converted letters appear in a smaller font size compared to the original uppercase letters in the text.
---
## Syntax
### Get the property value:
```javascript
let variantValue = object.style.fontVariant;
```
### Set the property value:
```javascript
object.style.fontVariant = "normal | small-caps | inherit";
```
---
## Property Values
| Value | Description |
| :--- | :--- |
| `normal` | **Default.** Specifies a normal font face. |
| `small-caps` | Specifies a font face where all lowercase letters are converted to small-sized uppercase letters. |
| `inherit` | Specifies that the value of the `fontVariant` property should be inherited from its parent element. |
---
## Browser Support
The `fontVariant` property is fully supported by all major modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer (IE 9+)
* Safari
* Opera
> **Note:** Internet Explorer 7 and earlier versions do not support the `"inherit"` value. Internet Explorer 8 supports `"inherit"` only if a `` is specified. Internet Explorer 9 and later fully support `"inherit"`.
---
## Code Examples
### Example 1: Changing Text to Small-Caps Dynamically
The following example demonstrates how to use JavaScript to change the font variant of a paragraph to `small-caps` when a button is clicked.
```html
YouTip - Style fontVariant Example
This is some text.
THIS IS SOME TEXT (Standard Uppercase for comparison).
```
### Example 2: Getting and Toggling the fontVariant Property
You can also read the current state of the `fontVariant` property to toggle between `normal` and `small-caps`:
```javascript
function toggleFontVariant() {
let element = document.getElementById("p1");
if (element.style.fontVariant === "small-caps") {
element.style.fontVariant = "normal";
} else {
element.style.fontVariant = "small-caps";
}
}
```
---
## Considerations & Best Practices
1. **Font Family Support:** The visual quality of `small-caps` depends heavily on the font family being used. Some professional fonts include dedicated, beautifully designed small-caps glyphs. If the font does not natively support small-caps, the browser will programmatically scale down standard uppercase letters to simulate the effect.
2. **Readability:** Use `small-caps` sparingly. While it is excellent for headings, abbreviations, or sub-headings, rendering large blocks of body text in small-caps can significantly reduce readability.
3. **CSS Equivalent:** The JavaScript `style.fontVariant` property directly manipulates the CSS `font-variant` property. For static styling, it is always recommended to define this in your CSS stylesheet rather than using inline JavaScript styles.
YouTip