CSS Font
Advertisements
CSS Font
CSS font is used for design text or font for display on web page. CSS font properties define the font family, boldness, size, and the style of a text.
CSS Font Families
Font Style
Font style are used for set font style. Font style property has three values they are;
- normal: The text is shown normally
- italic: The text is shown in italics
- oblique: The text is "leaning" (oblique is very similar to italic, but less supported)
Example: font style
<html>
<head>
<style>
h1 {
font-style: normal;
}
h2 {
font-style: italic;
}
p {
font-style: oblique;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Output
This is h1 Heading
This is h2 Heading
This is Paragraph
Font Size
We can define size of font in following way
- With Em
- Percent
- With Pixels
Font size in pixels
If you Setting the text size with pixels then you can gives full control over the text size.
Example: font size in pixel
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Output
This is h1 Heading
This is h2 Heading
This is Paragraph
Font size in Em
The em size unit is recommended by the W3C. 1em is equal to default text size in browsers (16px). The size convert pixels to em using this formula: pixels/16=em
Example: font size in Em
<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>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Output
This is h1 Heading
This is h2 Heading
This is Paragraph
Font size in percent
Text size work on all browsers, you can use default font-size in percent for the <body> element.
Example: 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>
<h1>This is h1 Heading</h1>
<h2>This is h2 Heading</h2>
<p>This is Paragraph</p>
</body>
</html>
Output
This is h1 Heading
This is h2 Heading
This is Paragraph
Browser supported
| Properties | |||||
| font | Yes | Yes | Yes | Yes | Yes |
Google Advertisment