CSS font is opted for design text or font for display on web page. CSS font properties distinct the font family, boldness, size, and the style of a text.
Font Style-
Font style property is opted to set the font style for a text. Font style property has three values, they are:
• Normal: When normal is opted, the text is shown normally.
• Italic: When italic is opted, the text is shown in italics.
• Oblique: When oblique is opted, the text is shown "leaning" (oblique is very similar to italic, but less supported).
Example of opting font style is depicted in the example given below-
<HTML>
<head>
<style>
h1{
font-style: normal;
}
h2{
font-style: italic;
}
p{
font-style: oblique;
}
</style>
</head>
<body>
<h1>This is h1 Heading, normal.</h1>
<h2>This is h2 Heading, italic.</h2>
<p>This is Paragraph, oblique.</p>
</body>
</HTML>
Output of the program is given below-
This is h1 Heading, normal.
This is h2 Heading, italic.
This is Paragraph, oblique.
Font Size-
The font-size property is opted to set the size of a font. We can distinctly size of font in following way-
• Em
• Percent
• Pixels
Font size in Em-
The em size unit is suggested by the W3C. 1em is equal to the default text size in browsers (16px). It permits optrs to resize the text (in the browser menu), many developers opt em instead of pixels. The formula which is opted to convert pixels to em is given below-
pixels/16=em
In the following example HTML code, we have opted em in font size-
<HTML>
<head>
<style>
h1{
font-size: 2.5em; /* 40px/16=2.5em */
}
h2{
font-size: 1.875em; /* 30px/16=1.875em */
}
p{
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</HTML>
The above code gives the following output-
This is h1 Heading
This is h2 Heading
This is Paragraph
Font size in percent-
One em is equal to 16px which is also equal to 100% in normal browser view. Text size works on all browsers, we can opt default font-size in percent for the <body> element. The following HTML code depicts the font size in percent-
<HTML>
<head>
<style>
body {
font-size: 100%;
}
h1{
font-size: 2.5em;
}
h2{
font-size: 1.875em;
}
p{
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</HTML>
The above code gives the following output-
This is h1 Heading
This is h2 Heading
This is Paragraph
Font size in pixels-
We may also opt pixels units to distinct the size of the text. If we are setting the text size with pixels then we can provide full control over the text size. The key point to be noted here is that if we opt pixels, we can still opt the zoom tool to resize the entire page. The syntax of opting pixels to set text size is similar to as opted in percent. In the following code the size of font is set opting pixel-
<HTML>
<head>
<style>
h1{
font-size: 40px;
}
h2{
font-size: 30px;
}
p{
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</HTML>
The above code gives the following output-
This is h1 Heading
This is h2 Heading
This is Paragraph