CSS Font Style
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal – The text is shown normally
- italic – The text is shown in italics
- oblique – The text is “leaning” (oblique is very similar to italic, but less supported)
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style property</h1>
<p>This is a paragraph in normal style.</p>
<p>This is a paragraph in italic style.</p>
<p>This is a paragraph in oblique style.</p>
</body>
</html>
Font Weight
The font-weight property specifies the weight of a font:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p>My name is Hege Refsnes.</p>
<p>My name is Hege Refsnes.</p>
</body>
</html>