In this article, we are going to discuss a property that is used as shorthand to specify different font properties.
The font property is a shorthand property for various font-related properties.
Shortening the code in Cascade Style Sheet (CSS) helps to specify all individual related properties into a single property. The font property is used as shorthand for various font properties like font-size, font-style, font-family, font-weight and font-variant.
Font properties:
- font-size: It specifies the size of the text.
- font-style: It specifies the style of text such as normal, italic, or oblique.
- font-family: It specifies the font for the text.
- font-weight: This property specifies how thick the text should be displayed.
- font-variant: It specifies whether the text is represented in small caps or not.
Note: The font-size and font-family are required properties and even if not specified, set the default values for the properties.
Example 1: Let’s look into the sample example program that uses the font property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font: 30px,Serif;
}
p {
font: italic 10px Georgia, Sans-serif;
}
</style>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h1>
<p>Geeks for Geeks-One of the best online
content providing, learning platform.</p>
</center>
</body>
</html>
|
Output:
Example 2: In this example code, we will apply all font related properties in a single shorthand code.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p{
font:italic normal 250 50px "Times New Roman";
}
</style>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<b>Font shorthand Property</b>
<p>Default code has been loaded into the Editor.</p>
</center>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
18 Jun, 2022
Like Article
Save Article