The lists of font properties available in CSS are,
1)font-family
2)font-style
3)font-variant
4)font-weight
5)font-size
6)font
Some descriptions with examples are shown below.
1)font-family:
With font-family property it is specified several fonts so that browser can choose the text font of the element in an order. If first font in the order is not available then browser use second font in the order to display the item and so on.
There are two types of names used to categorize fonts: family-names and generic families.
Family name denotes a specific font name.
Generic family denotes a group of family name.
Family name and their generic family is displaying HTML code and result is given below.
<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of Generic family serif</div></u></b>
<div style="font-family:Times New Roman">Times New Roman</div>
<div style="font-family:Garamond">Garamond</div>
<div style="font-family:Georgia">Georgia</div>
</ul>
<ul>
<b><u><div style="font-famimy:sans-serif;padding-bottom:.2em">Following is an example of Generic family sans-serif</div></u></b>
<div style="font-family:Trebuchet">Trebuchet</div>
<div style="font-family:Arial">Garamond</div>
<div style="font-family:Verdana">Georgia</div>
</ul>
<ul>
<b><u><div style="font-famimy:serif;padding-bottom:.2em">Following is an example of Generic family Monospace</div></u></b>
<div style="font-family:Courier">Courier</div>
<div style="font-family:Courier New">Courier New</div>
<div style="font-family:Andele Mono">Andele Mono</div>
</ul>
Output is,
Following is an example of Generic family serif
Times New Roman
Garamond
Georgia
Following is an example of Generic family sans-serif
Trebuchet
Garamond
Georgia
Following is an example of Generic family Monospace
Courier
Courier New
Andele Mono
You can also specify font-family as below.
font-family: arial, verdana, sans-serif;
If Arial font is not available to browser it will try to display as font verdana. If verdana not available then it will display a font from sans-serif family.
2)font-style:
font-style can be defined as normal, italic or oblique.
Following is an example.
<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-style:italic">Times New Roman</div>
<div style="font-family:Garamond; font-style:oblique">Garamond</div>
<div style="font-family:Georgia; font-style:normal">Georgia</div>
</ul>
Following is an example of font-style of Generic family serif
Times New Roman
Garamond
Georgia
3)font-variant:
Font-variant value can be normal or small-caps. A small-caps font is a font that displays all letters like capital letters but for uppercase size is greater than lower.
Example is,
<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-variant:small-caps">Times New Roman</div>
<div style="font-family:Garamond; font-style:normal">GarAmond</div>
<div style="font-family:Georgia; font-variant:small-caps">GeoRGia</div>
</ul>
Following is an example of font-style of Generic family serif
Times New Roman
GarAmond
GeoRGia
4)font-weight:
font-weight defines how bold or heavy a font will be. It can have value normal or bold. Also it can have weight between 100 to 900 to describe the weight of a font.
Example is shown below.
<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-weight:700">Times New Roman</div>
<div style="font-family:Garamond; font-weight:bold">GarAmond</div>
<div style="font-family:Georgia; font-weight:normal">GeoRGia</div>
</ul>
Following is an example of font-style of Generic family serif
Times New Roman
GarAmond
GeoRGia
5)font-size:
font-size describes how big a font will be. It can be expressed in various unit like pixel size(px), percentage(%), adjust based on screen(em).
Following is an example,
<ul>
<b><u><div style="font-famimy:serif; padding-bottom:.2em">Following is an example of font-style of Generic family serif</div></u></b>
<div style="font-family:Times New Roman;font-size:2.2em">Times New Roman</div>
<div style="font-family:Garamond; font-size:30px">GarAmond</div>
<div style="font-family:Georgia; font-size:120%">GeoRGia</div>
</ul>
Following is an example of font-style of Generic family serif
Times New Roman
GarAmond
GeoRGia
6)font:
The font is a short hand property. It covers all the different font properties in one single property.
Suppose you have defined you font styles as below,
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family: arial, sans-serif;
Instead of writing these, you simply can use font like below.
font: italic bold 10px arial, sans-serif;
The order of values for font is:
font-style | font-variant | font-weight | font-size | font-family
Related Documents
No comments:
Post a Comment