Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set whether the style of the font is normal, italic or oblique with JavaScript?
To set the style of the font in JavaScript, use the fontStyle property. This property accepts three values: normal, italic, and oblique.
Syntax
element.style.fontStyle = "normal" | "italic" | "oblique";
Example: Setting Font Style to Italic
<html>
<body>
<p id="myID">
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
</p>
<button type="button" onclick="display()">Set Font to Italic</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
document.getElementById("myID").style.fontStyle = "italic";
}
</script>
</body>
</html>
Example: Demonstrating All Font Styles
<html>
<body>
<p id="normalText">Normal font style text</p>
<p id="italicText">Italic font style text</p>
<p id="obliqueText">Oblique font style text</p>
<button onclick="setStyles()">Apply Font Styles</button>
<script>
function setStyles() {
document.getElementById("normalText").style.fontStyle = "normal";
document.getElementById("italicText").style.fontStyle = "italic";
document.getElementById("obliqueText").style.fontStyle = "oblique";
}
</script>
</body>
</html>
Font Style Values
| Value | Description | Appearance |
|---|---|---|
normal |
Default upright text | Regular text |
italic |
Uses italic version of font | Slanted, designed italic |
oblique |
Artificially slanted normal text | Slanted regular text |
Difference Between Italic and Oblique
italic uses the actual italic font design, while oblique artificially slants the normal font. Most browsers will fall back to oblique if italic is not available.
Conclusion
Use the fontStyle property to control text appearance. Choose italic for proper italic fonts or oblique for slanted text when italic fonts aren't available.
Updated on: 2026-03-15T23:18:59+05:30
190 Views
Advertisements