Categories
In CSS, the font property is used to set various aspects of the font for text content within HTML elements. It is a shorthand property that combines multiple individual font-related properties into a single declaration. The font property includes the following sub-properties:
-
Font Style:
font-style: Specifies whether the text should be displayed in italic, oblique, or normal (default) style.
-
Font Variant:
font-variant: Modifies the appearance of the text, such as making it small-caps.
-
Font Weight:
font-weight: Sets the thickness or boldness of the text. It can take values likenormal,bold,bolder,lighter, or numeric values (e.g., 400, 700, etc.).
-
Font Size:
font-size: Specifies the size of the font. It can be set in pixels (px), em units, percentages (%), or other valid CSS units.
-
Line Height:
line-height: Sets the height of each line of text. It can be set in pixels (px), em units, percentages (%), or other valid CSS units.
-
Font Family:
font-family: Specifies the font family or a list of font families for the text. It should be defined in order of preference, and if a font is not available, the next one in the list will be used.
Here's the syntax of the font property:
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
Let's see some examples of using the font property:
1) Basic Font Style:
/* Example using font */
p {
font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}
2) Font Size and Line Height:
/* Example using font size and line height */
h1 {
font: 36px/1.2 "Georgia", serif;
}
3) Font Style and Family:
/* Example using font style and family */
a {
font: italic 14px "Times New Roman", serif;
}
4) Font Weight and Family:
/* Example using font weight and family */
.section {
font: bold 18px/1.6 "Helvetica", Arial, sans-serif;
}
5) Font Variant and Size:
/* Example using font variant and size */
.quote {
font: small-caps 20px/1.4 "Courier New", monospace;
}