Fonts and its attributes

Last update on: 05-18-2008
The font tag is used to control the characteristics of a given set of characters not covered by the character styles. Originally, was used only to control the font size of the characters it surrounds, but it was then extended to enable you to change the font itself and the color of those characters.

Changing the Font Size

The most common use of the tag is to change the font size of a character, word, phrase, or any range of text. The ... tags enclose the text, and the size attribute indicates the desired font size. The values of size are 1 to 7, with 3 being the default size. Or by relative value by using the + or - characters in the value for size (-3 to +4) Consider the following example:

<font size="1">This is the font size 1</font><br />
<font size="2">This is the font size 2</font><br />
<font size="3">This is the font size 3</font><br />
<font size="4">This is the font size 4</font><br />
<font size="5">This is the font size 5</font><br />
<font size="6">This is the font size 6</font><br />
<font size="7">This is the font size 7</font><br />

<!-- With relative value -->

<font size="-3">This is the font size -3</font><br />
<font size="-2">This is the font size -2</font><br />
<font size="-1">This is the font size -1</font><br />
<font size="+1">This is the font size +1</font><br />
<font size="+2">This is the font size +2</font><br />
<font size="+3">This is the font size +3</font><br />
<font size="+4">This is the font size +4</font><br />

Changing the Font Face:

The face attribute takes as its value a set of font names, surrounded by quotation marks and separated by commas. When a browser that supports face interprets a page with face in it, it searches the system for the given font names one at a time. If it can't find the first one, it tries the second, and then the third, and so on, until it finds a font that's installed on the system. If the browser can't find any of the listed fonts, the default font is used instead. So, for example, the following text would be rendered in Futura. If Futura isn't available, the browser will try Helvetica; it will then fall back on the default if Helvetica isn't available:

<p><font face="Futura,Helvetica">Sans Serif fonts are fonts without
the small "ticks" on the strokes of the characters. </font></p>

Modifying Fonts Using CSS

Like we already said that we have the style attribute that can be used in the most tags with its span class="insidecode">font-family< propriety as you can see in this example:

<p style="font-family: Verdana, Trebuchet, Arial, sans-serif">
This is sans-serif text.</p>
<p style="font-family: Courier New, monospace">This is
monospace text.</p>

<p style="font-family: Georgia">This text will appear in the
Georgia font, or, if that font is not installed, the browser's
default font.</p>

Formatting Text's lessons:

Character-Level Elements
Formatting Using CSS
Preformatted Text
Horizontal Rules
Line Break
Addresses
Quotations
Text Alignment
Fonts And Its Attributes
Special Characters