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
Which property is used to make a font oblique?
In CSS, we can use the font-style property to set the style of the font. We can use different styles as values of the font-style property, and oblique is one of them.
The oblique font is a slanted version of the text that creates a sloped appearance. Unlike italic fonts which use specifically designed slanted characters, oblique fonts are created by mathematically slanting the normal font characters.
Syntax
selector {
font-style: oblique;
}
Example 1: Basic Oblique Font
In the example below, we have created two paragraphs to compare normal and oblique font styles
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
font-style: normal;
font-size: 1.5rem;
margin: 10px 0;
}
.oblique {
font-style: oblique;
font-size: 1.5rem;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Using font-style: oblique to make font oblique</h2>
<p class="normal">This font is Normal font.</p>
<p class="oblique">This font is oblique font.</p>
</body>
</html>
The first paragraph appears in normal upright text, while the second paragraph displays slanted oblique text.
Example 2: Oblique with Custom Angle
You can specify a custom angle with the oblique property. The angle value ranges from -90deg to 90deg
<!DOCTYPE html>
<html>
<head>
<style>
.oblique-20 {
font-style: oblique 20deg;
font-size: 1.5rem;
margin: 10px 0;
}
.oblique-40 {
font-style: oblique 40deg;
font-size: 1.5rem;
margin: 10px 0;
}
.oblique-60 {
font-style: oblique 60deg;
font-size: 1.5rem;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Using oblique with different angles</h2>
<p class="oblique-20">This font has oblique style with 20deg slope.</p>
<p class="oblique-40">This font has oblique style with 40deg slope.</p>
<p class="oblique-60">This font has oblique style with 60deg slope.</p>
</body>
</html>
Three paragraphs display with increasing slant angles - 20deg shows a slight slant, 40deg shows medium slant, and 60deg shows a pronounced slant.
Example 3: Inheritance of Oblique Style
When applied to a parent element, the oblique font style is inherited by all child elements
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-style: oblique;
font-size: 1.5rem;
padding: 20px;
border: 2px solid #ccc;
}
.child {
margin: 10px 0;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h2>Inheritance of oblique font style</h2>
<div class="parent">
This is a parent div with oblique font.
<div class="child">
This is a child div that inherits the oblique style.
<div class="child">
This is a nested child div that also inherits oblique style.
</div>
</div>
</div>
</body>
</html>
A container with oblique text containing nested divs, where all text elements display the inherited oblique font style.
Conclusion
The font-style: oblique property creates slanted text by mathematically tilting normal characters. You can use it with or without custom angles to achieve the desired visual effect for your text content.
495 Views
