The font attribute in CSS is employed to manage the appearance of text content. It enables adjustments to be made to text dimensions, color, formatting, and other characteristics. This CSS attribute serves as a condensed property that merges various sub-properties (such as font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family) within a single statement.
The font property shorthand requires two mandatory values: font-size and font-family. Omitting either of these will result in the entire declaration being disregarded. It is crucial to specify the font-family value as the last one among all values; failing to do so will also lead to the declaration being ignored. The remaining five values are optional.
The font-family attribute permits the use of multiple font names as alternative options in case the primary font is not supported by the browser. Listing multiple font names is done by separating them with commas.
Note: If the name of the font-family has more than one word, it must be written in quotation marks, like: "Lucida Console".
If the properties font-style, font-variant, and font-weight are included in the font shorthand property, they need to be specified before the font-size in the declaration. Failing to do so will result in these properties being disregarded, leading to the omission of essential values.
body {
font: oblique small-caps bolder 30px cursive;
}
In the declaration above, we have specified optional values that are predefined prior to setting the font size.
Specifying the line-height is not mandatory, however, when necessary, it should be defined following the font-size using a forward slash.
body {
font: oblique small-caps bolder 30px/15px cursive;
}
In the declaration provided, the value 15px represents the line-height property. If the line-height is removed, the slash must also be removed; otherwise, the declaration will be disregarded.
Let's explore the process of altering the font style in CSS through practical illustrations.
Example
<html>
<head>
<style>
body{
font-style: italic;
font-variant: normal;
font-weight: bolder;
font-size: 25px;
font-family: garamond, cursive;
}
</style>
</head>
<body>
<p>
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
Output
Example
In the previous illustration, we demonstrated the application of individual font properties. In this instance, we are employing the font shorthand property. The constituent properties included in this font shorthand property encompass font-style, font-variant, font-weight, font-size, and font-family.
<html>
<head>
<style>
body{
font: oblique normal lighter 25px monospace, garamond;
}
</style>
</head>
<body>
<p>
Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
Output