CSS Font Properties are used to control the look, size, style and dimensions of text that appear on a page. The following are the Font Properties that can be set for any selector using CSS rules.
font-family
font-family uses a comma separated list of font names that can be used to display text. It is set as a list of font names where the priority of the font that can be used is followed from left to right. The browser takes the list of font names as the alternatives to choose from when a page is being rendered in the browser. Whichever highest priority font is available on a user’s system, it is applied.
The list must include generic font families so that if a user’s system does not support the preferred font family then the alternate font name can be used to render the nearest possible font appearance.
Example
font-family: arial, helvetica, century gothic;
font-family:sans-serif, cursive;
<HEAD>
<STYLE TYPE="text/css">
P{font-family:cursive;}
h1{font-family: arial, helvetica, century gothic;}
h2{font-family: verdana, calibri;}
</STYLE></HEAD>
<BODY>
<H1>Header 1 </H1>
<p>Integer nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla.</p>
<H2>Header 2</H2>
<P>Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel,</P>
</BODY>font-size
CSS font-size property is used to set the size of the text that appears in a page. Change in the font-size affects the relative font-sizes defined with em and ex
font –size can be specified as absolute, relative, percentage or length (pixels or em).
- Absolute font-size – small, medium, large, xx-small, x-small, xxx-large, xx-large, xx-large
- Relative font-size- smaller, larger
- Percentage font-size – number%
- length font-size- number px or decimal em
Example
<HEAD>
<STYLE TYPE="text/css">
h3{color:Blue;font-family: verdana, calibri;}
</STYLE></HEAD>
<BODY>
<H3>Absolute font-size</H3>
<P style="font-size:normal">normal</P>
<P style="font-size:mediul">medium</P>
<P style="font-size:small">Small</P>
<P style="font-size:x-small">x-small</P>
<P style="font-size:xx-small">xx-small</P>
<P style="font-size:large">large</P>
<P style="font-size:x-large">x-large</P>
<P style="font-size:xx-large">xx-large</P>
<P style="font-size:xxx-large">xxx-large</P>
<H3>Relative font-size</H3>
<P style="font-size:smaller">smaller</P>
<P style="font-size:larger">larger</P>
<H3>Percetage font-size</H3>
<P style="font-size:40%">text at 40%</P>
<P style="font-size:80%">text at 80%</P>
<P style="font-size:200%">text at 200%</P>
<H3>length font-size</H3>
<P style="font-size:20px">text at 20 Pixels</P>
<P style="font-size:32px">text at 32 pixels</P>
<P style="font-size:1.8em">text at 1.8em</P>
<P style="font-size:0.8em">text at 0.8em</P>
</BODY>font-stretch
CSS font-stretch property is used to define the space between characters of a word. You can use predefined values or percentage. The font-stretch property has no effect on font-families with no condensed or expanded font-faces.
Predefined values are – condensed, extra-condensed, ultra-condensed, semi-condensed, normal, expanded, extra-expanded, ultra-expanded, semi-expanded.
font-style
font-style is used to style the text as normal, italic or oblong. The oblong font-style can be set with deg value to make normal characters appear slanted at the specified angle
Example
<HTML> <BODY> <P style="font-style:normal;">normal text</P> <P style="font-style:italic;">italic text</P> <P style="font-style:oblong;">oblong text</P> </BODY> </HTML>
font-weight
font-weight property is set to define the weight or boldness of the text. The values can be chosen from the predefined keyword values (absolute or relative) or numeric values between 100 and 900. 400 for normal and 700 for bold.
Keyword absolute values are normal and bold. Keyword relative values are lighter and bolder.
Example
<HTML> <BODY style="font-family:arial;"> <P style="font-weight:normal;">normal text</P> <P style="font-weight:bold;">bold text</P> <P style="font-weight:bolder;">bolder text</P> <P style="font-weight:light;">light text</P> <P style="font-weight:lighter;">lighter text</P> <P style="font-weight:100;">100 text</P> <P style="font-weight:400;">400 text</P> <P style="font-weight:700;">700 text</P> <P style="font-weight:900;">900 text</P> </BODY> </HTML>
line-height
line-height refers to the space between the text lines. Line-height defines how far the text lines will be from each other. The allowed values are normal, numeric value multiplied with font size to set the space, length (px or em) and percentage of font size.
Example
<HTML> <BODY style="font-family:arial;"> <P style="line-height:10px; color:brown">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</P> <P style="line-height:20px; color:Green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</P> <P style="line-height:2;color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</P> <P style="line-height:150%;color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</P> </BODY> </HTML>