- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the different styles as a value of the font-style property, and ‘oblique’ is one of them.
Basically, the ‘oblique’ font is a sloppy version of the text, and we set the angle to decrease or increase the slope of the text. Here, we will make a font oblique in the various examples.
Syntax
Users can follow the syntax below to make a font oblique using the font-style property of CSS.
font-style: oblique;
Example 1
In the example below, we have created two <p> tags and added the texts inside them to show on the webpage. Also, we have applied the ‘font-style: normal’ CSS property for the first <p> tag and the ‘font-style: oblique’ CSS property for the second <p> tag.
In the output, uesrs can observe that oblique fonts are sloppy than normal.
<html>
<head>
<style>
.normal {
font-style: normal;
font-size: 1.5rem;
}
.oblique {
font-style: oblique;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i> font-stlye: oblique </i> to make font oblique.</h2>
<p class = "normal"> This font is Normal font. </p>
<p class = "oblique"> This font is <i> oblique </i> font. </p>
</body>
</html>
Example 2 (Angle with Oblique Property, Only Works in Firefox Browser)
In the example below, we have added the angle also with the ‘oblique’ font-style property. The limitation is that angle only works in the Firefox browser.
We have created three different div elements and added text to them. In CSS, we applied font-style oblique property to all fonts with different angles. In the output, users can observe that as the angle increases, the slop of the font also increases.
<html>
<head>
<style>
.one {
font-style: oblique 40deg;
font-size: 1.5rem;
}
.two {
font-style: oblique 80deg;
font-size: 1.5rem;
}
.three {
font-style: oblique 30deg;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
<p class = "one">The font style is oblique and slope is 40deg.</p>
<p class = "two">The font style is oblique and slope is 80deg.</p>
<p class = "three">The font style is oblique and slope is 120deg.</p>
</body>
</html>
Example 3
In the example below, we have created the div element and added some nested div elements at multiple levels. We have used the ‘font-style: oblique’ CSS property for the parent div, and users can see that all fonts of the div became sloppy, including the child div elements.
<html>
<head>
<style>
.test {
font-style: oblique;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2>Using the <i>font-stlye: oblique</i> to make font oblique.</h2>
<div class = "test">
This is a parent div.
<div>
This is a child div with font-style: oblique.
<div>
This is another nested child div with font-style: oblique.
</div>
</div>
</div>
</div>
</body>
</html>
Users learned to make a font of oblique type using the font-style property. It is almost similar to the ‘italic’ font style as it also creates sloppy or cursive fonts.
139 Views
