CSS font: style MCQs Quiz | Class 10

Understanding CSS `font-style` Property

The CSS font-style property is used to specify the style of the font, primarily allowing text to be rendered as normal, italic, or oblique. This property is crucial for enhancing the readability and visual hierarchy of text on a webpage.

Key Values for font-style:

• normal: This is the default value. It renders the text with the normal font face of the specified font family. No special styling is applied.
• italic: This value renders the text in an italic font face. If a true italic version of the font is available, the browser will use it. Italic fonts are specially designed for a slanted appearance, often with different letterforms than the normal style.
• oblique: This value renders the text in an oblique (slanted) font face. If a true italic font is not available, the browser will simulate an italic style by simply slanting the normal font. Oblique is essentially a mechanically slanted version of the normal face, while italic is a distinct typeface.

Differences Between italic and oblique:

While both italic and oblique make text appear slanted, there’s a fundamental difference in their origin:

Usage Example:

p {
  font-style: normal;
}
em {
  font-style: italic;
}
.oblique-text {
  font-style: oblique;
}

Quick Revision List:

• font-style controls text slant.
• normal is the default, no slant.
• italic uses a specially designed italic font.
• oblique mechanically slants the normal font.
• Browsers fallback to oblique if true italic is missing.

Further Practice Questions:

1. Which CSS property is used to make text appear slanted?
2. What is the default value of the font-style property?
3. If a font family does not have a true italic face, what will a browser typically render when font-style: italic; is specified?
4. Which value of font-style provides a mechanically slanted version of the normal font?
5. Can you specify an angle for the oblique value (e.g., oblique 10deg)? If so, what does it do?