CSS supports following basic font properties:
1. font-family
- This property sets the font for the text.
- It uses the font type such as Times new roman, Arial etc. which are supported by all the browsers.
2. font-style
This property is mostly used to specify italic text.This property has three values:
- Normal: It shows normal text.
- Italic: It show italic text.
- Oblique: It is similar to italic but has less support.
3. font-variant
This property has two values:1. normal
2. small-caps
- In this all lower case letters are converted to upper case letters.
- The converted upper case letters are shown in a smaller font size than the original uppercase letters in the text.
4. font-weight
This property has following possible values.- normal
- bold
- bolder
- lighter
- 100-900
5. font-size
This property sets the size of the text.The possible values of font size are:
- normal
- length like 10px, 14 pt etc.
- Absolute like xx-small, medium, large, x-large, xx-large.
- Relative like smaller, larger
- Percentage like 80%, etc.
Example: Font properties
<html>
<head>
<title>External style sheet</title>
<style type="text/css">
.fp
{
font-family: verdana;
}
.fp1
{
font-style:italic;
}
.fp2
{
font-variant: normal;
}
.fp3
{
font-variant: small-caps;
}
.fp4
{
font-weight: normal;
}
.fp5
{
font-weight: lighter;
}
.fp6
{
font-weight: bold;
}
.fp7
{
font-weight: 800;
}
.fp8
{
font-size: normal;
}
.fp9
{
font-size: xx-small;
}
.fp10
{
font-size: 30px;
}
</style>
</head>
<body>
<h2>This is an example of font property</h2>
<p class="fp">This paragraph shown in the verdana font</p>
<p class="fp1">This paragraph in italic</p>
<p class="fp2">This paragraph shows normal value of font-variant property.</p>
<p class="fp3">This is the result of small-caps value</p>
<p class="fp4">It is a font weight property</p>
<p class="fp5">Font-weight lighter</p>
<p class="fp6">Font-weight bold</p>
<p class="fp7">The font weight is 800<p>
<p class="fp8">It is a font size property</p>
<p class="fp9">font-size xx-small</p>
<p class="fp10">font-size 30px</p>
</body>
</html>
Output:
