CSS font property provides you to change your font size, font style, font-family, and lots of other things that you want to apply in your HTML page. This property shows that what do you want with text.let’s first, see the summarization of CSS font property.
- The font-family is used to specify the face of a font.
- The font-style property is used to specify the italic font.
- The font-variant is used to specify the effect of the small-cap of the font.
- The font-weight property is used to decrease or increase how bold or light font appears.
- The font-size property is used to specify the size of the font.
- The font property is used as shorthand to specify the number of other font properties.
So now,we will discuss about full description of font-properties.
1.CSS font-style property
Table of Contents
Let’s see the example of font-style property.
<!Doctype html>
<head>
<title>
CSS Font-style Property
</title>
<style>
p
{
font-style:italic;
}
</style>
</head>
<body>
<p>This is Your Tech Home.This is not a dummy text.</p>
</body>
</html>
This will provide following result with italic text.
2.CSS font-family property
Let’s see the example of font-family property.
<!Doctype html>
<head>
<title>
CSS Font-style Property
</title>
<style>
p
{
font-family:algerian;
}
</style>
</head>
<body>
<p>This is Your Tech Home.This is not a dummy text.</p>
</body>
</html>
this will provide following result.
3.CSS font-variant property
Let’s see the example of CSS font-variant property.
<!Doctype html>
<head>
<title>
CSS Font-style Property
</title>
<style>
p
{
font-variant:small-caps;
}
</style>
</head>
<body>
<p>This is Your Tech Home.This is not a dummy text.</p>
</body>
</html>
This will provide following result.
4.Font-weight style Property
Let’s see the example of CSS font-weight property.
<!Doctype html>
<head>
<title>
CSS Font-style Property
</title>
<style>
p
{
font-weight:600;
}
</style>
</head>
<body>
<p>This is Your Tech Home.This is not a dummy text.</p>
</body>
</html>
This will produce following result.
5.font-size property
Let’s see the example of CSS font-size property.
<!Doctype html>
<head>
<title>
CSS Font-style Property
</title>
<style>
p
{
font-size:20pt;
}
</style>
</head>
<body>
<p>This is Your Tech Home.This is not a dummy text.</p>
</body>
</html>
this will produce following result.
6.Shorthand Property
<html> <head> </head> <body> <p style = "font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once. </p> </body> </html>
This will produce following result-
