3.4 Changing Font Appearance and Size Of A HTML Web Page

Each browser displays text in its own default font. But sometimes you want to specify the font that will be used, You can use the <font> tag to control the font that text is displayed with.

The <font> tag is not supported in XHTML.

You should use styles to control fonts in your Web pages when you are coding to these standards.

The face Attribute

The face attributes defines the style of the font – the shape of the individual letters. Arial, Times Roman, and Courier are some commonly used fonts. When specifying a font in a Web page, you must be aware that users’ browsers will be limited to displaying the fonts they have installed on their system. In other words, you cannot be assured that your end users will be able to view the font you specify in the face attribute. But, the good news is that browsers handle this situation well. If the requested font is not available the browser will choose a similar font that is available. In the worst case scenario, it will fall back on the default font. Your text will be displayed even if not in the exact font you wanted.

How can you know what fonts are available on your own system? The best and simplest method is to open Microsoft Word and open its Fonts list. All the available fonts will be listed.This is shown in Figure below:

Another technique to view the available fonts is to open the Windows Control Panel and double-click the Fonts icon. Windows will display a list of all the available fonts.

The following fonts are widely used on the Web and you can assume that essentially all your site visitors will have them installed:

Arial

Arial Black

Courier New

Times New Roman

Impact

Comic Sans MS

Georgia

Trebuchet MS

Palatino Linotype

Verdana

The Size Attribute

The size attribute controls the size of the text. Rather than using the more usual points, HTML specifies font size as a value from 1 to 7, with 1 being very small and 7 large. The point equivalents are:

HTML SIZE	POINTS
1	8
2	10
3	12
4	14
5	18
6	24
7	36

The color Attribute

The color attributes determines the text color. The default is black. There are two ways to specify a numeric color value using rgb() function or hex notation. Thus, you could make text green like this:

<p>Font color=”green”>This is green text</font>and this text is not.</p>

The <font> Tag

Now that you have learned how to use the <font> tag to control the font in your document, let’s look at an example. Here’s some HTML code that uses the <font> tag:

<p>This is normal black text, <font size=6 color='green'>this is larger green text,</font></p>
<p><font size=4 color='blue'>This is blue in the largest size </font>, now back to normal!</p>
<p><font size=4 color='#008080'>Blue large, <font size=7 color='brown'>brown larger,</font>back to blue to blue large</font></p>

The output of this in a browser is shown in Figure below. Each <font> tag controls the text that it encloses, when the ending </font> tag is reached, the text reverts to whatever it was before.