CSS FONTS
To make HTML documents (webpage) more readable and easy to overview we have different size, forms, shapes and different other visible properties of texts.
We can provide texts of these different properties using CSS font properties.
The CSS font properties are as follows:
1).CSS font family
It is divide into two parts:
- Generic family: This family includes Monospace, serif and sans-serif.
- Font family: This includes font family like Monospace, serif and arial, Monospace, serif and New Times Roman etc.
sans-Serif
- Arial, sans-serif:
- Helvetica, sans-serif:
- Gill sans, sans-serif:
- Lucida, sans-serif:
- Helvetica Narrow, sans-serif
- sans-serif
Serif
- Times, serif:
- Times New Roman, serif:
- Polatino, serif:
- Bookman, serif:
- New Century Schoolbook, serif
- serif
Using CSS property font-family we specify family to the HTML elements.
h1 {
font-family:"sans-serif";
}
h2 {
font-family:"monospace";
}
p {
font-family:"Times New Roman";
}
▶ Run the code
Output:
This is shown in sans-serif.
This is shown in monospace.
This is shown in Times New Roman.
2).CSS font size
CSS font-size property is used to set font size.
Using this property we can resize the font choosing any scale like px,em,%(percentage) etc.
h1 {
font-size:40px;
}
h2 {
font-size:1.8em;
}
p {
font-size:120%;
}
▶ Run the code
3).CSS font style
CSS font-style property is used to set the font style of an HTML document.
Using this property we can choose font style like normal,oblique or italic.
- normal - font is normal.
- oblique - font is little leaning.
- italic - font is italic.oblique and italic looks similar.
h2 {
font-style:normal;
}
h3 {
font-style:oblique;
}
p {
font-style:italic;
}
▶ Run the code
4).CSS font weight
CSS font-weight property is used to define weight of font and manages the boldness of font.
font-weight ranges from 100 to 900 and three more values i.e bold,bolder and lighter.
<h2 style="font-variant:normal">This heading has normal font-variant property.</h2>
<p style="font-variant:small-caps">This line has small-caps font-variant property.</p>
▶ Run the code
5).CSS font variant
CSS font-variant property is used to define whether or not text be displayed in capital letters.
font-variant:small-caps makes small text capital but those tests which convert to capital are smaller in size than those of original capital text present in paragraph.
<h2 style="font-variant:normal">This heading has normal font-variant property.</h2>
<p style="font-variant:small-caps">This Paragraph Has Small-caps Font-variant Property.</p>
▶ Run the code