Wednesday, September 11, 2019
Introduction to CSS Font Properties
Through CSS you can change the size, style, weight, line-height, etc. of fonts. A separate property has been created for all these changes. Let us know about these properties.font-family Property
To set the font's family of any HTML element, you use the font-family property. You give the name of any font family as the value of this property.The following is a list of some font families that you can use as values.
- Times new roman
- Verdana
- Arial
- Courier
- serif
Let us try to understand the font family property with an example.
<html>
<head>
<title> Font Family Property Demo </title>
<style>
p
{
font-family: Arial;
}
</style>
</head>
<body>
<h1> Example of Font Family </h1>
<p> This font property will be shown in Arial. </p>
</body>
</html>
The above code generates the output given below.
 |
| CSS Font Properties |
font-style Property
With the help of CSS, you use font-style property to change font style. The values of this property can be normal, italic and oblique. The example is given below.<html>
<head>
<title> Demo of Font style Property </title>
<style>
h1
{
font-style: italic;
}
</style>
</head>
<body>
<h1> This is italic heading. </h1>
<p> This is a paragraph example of font style property. </p>
</body>
</html>
The above code generates the output given below.
 |
| font-style Property |
font-variant Property
With the help of this property you can define variants of the font. With the help of this property, you can show fonts in capital letters. The values of this property can be normal and small-caps. An example of this is given below.<html>
<head>
<title> This is example of font variant property </title>
<style>
p
{
font-variant: small-caps;
}
</style>
</head>
<body>
<p> This paragraph is an example of font-variant </p>
</body>
<html>
The above code generates the output given below.
 |
| font-variant Property |
font-weight Property
With this property you can define the weight of the font. This property defines how bold the font will be. The values of this property can be bold, bolder and lighter. You can also define a custom font weight. An example of this is given further.<html>
<head>
<title> Example of font-weight property </title>
<style>
p
{
font-weight: bold;
}
</style>
</head>
<body>
<p> This is font weight example </p>
</body>
</html>
font-size property
Through this property you can change the font size of any HTML element. You can give the value of this property in pixels and also in%. The example is given below.<html>
<head>
<title> demo of font size property </title>
<style>
h1
{
font-size: 22px;
}
p
{
font-size: 14px;
}
</style>
</head>
<body>
<h1> heading 1</h1>
<p> paragraph </h1>
</body>
</html>
font-size-adjust Property
Through this property you can adjust the size of the font. When you define this property, no matter what the font family is, the browser automatically adjusts the height of the font. The example is given below.<html>
<head>
<title> demo of font size adjust property </title>
<style>
p
{
font-size-adjust: 0.48;
}
# p1
{
font-family: Verdana;
font-size-adjust: 0.48;
}
</style>
</head>
<body>
<p> paragraph </p>
<p id = "p1"> This is second paragraph </p>
</body>
</html>
font-stretch Property
With this property you can stretch the font. The value of this property can be normal, wider, narrower and condensed etc. Now no browser supports this property. Let us try to understand it with an example.<html>
<head>
<title> demo of font stretch property </title>
<style>
# p1
{
font-stretch: wider;
}
</style>
</head>
<body>
<p> Paragraph. </p>
<p id = "p1"> This is second paragraph. </p>
</body>
</html>