![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS font-variant Property
![CSS font-variant Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-font-variant.webp)
Photo Credit to CodeToFun
🙋 Introduction
The font-variant
property in CSS is used to control the usage of alternate glyphs within a font. It allows you to specify whether certain characters, such as small capitals or old-style figures, should be used.
This property can enhance the typographic presentation of your text, adding a unique touch to your web content.
💡 Syntax
The syntax for the font-variant
property is straightforward. It can be applied to any text element.
element {
font-variant: value;
}
🎛️ Default Value
The default value of the font-variant
property is normal, which means no special variant glyphs are used and the text is displayed in its normal form.
🏠 Property Values
Value | Description |
---|---|
normal | The default value, which specifies a normal font face without any variants. |
small-caps | Transforms lowercase letters into smaller uppercase letters. |
all-small-caps | Changes all characters to small caps, including uppercase characters. |
petite-caps | Transforms lowercase letters into petite capitals, a smaller version of small-caps. |
all-petite-caps | Changes all characters to petite caps, including uppercase characters. |
unicase | A mix of uppercase and lowercase letters for stylistic purposes. |
titling-caps | Uses a titling font, which is designed for use in titles. |
📄 Example
In this example, we'll apply the font-variant
property to transform text into small capitals.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS font-variant Example</title>
<style>
.small-caps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Font Variant Example</h1>
<p class="small-caps">This text is displayed in small capitals.</p>
</body>
</html>
🖥️ Browser Compatibility
The font-variant
property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.
🎉 Conclusion
The font-variant
property is a useful tool for web developers looking to enhance the typographic presentation of their text.
By using this property, you can add stylistic variations to your fonts, making your web content more visually appealing and engaging. Experiment with different values to see how this property can improve the look and feel of your text.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS font-variant Property), please comment here. I will help you immediately.