|
|
| |
Enhancement with <Font> and </Font> Tags |
The Font Tag And All It's Attributes
|
The Font Tag adds several enhancements to the appearance of text in a web document. You can name the font face (name and style), the size of characters, and color of characters.
Over the years since HTML was first developed to graphically display text documents, the Font Tag has undergone many modifications. Most of these modifications dealt with displaying the text in a HTML document in a uniform style on the old computer Operating Systems (OS), as more OS became available to display HTML documents the Font Tag acquired more attributes for display on these older OS.
For the sake of uniform display across modern browsers and OS we will ignore the older attributes and focus on the modern cross browser and OS Font Attributes |
| The Font Attributes |
The Font Tag is like the <B> in that it is an inline style control. The Font Tag can be placed at the beginning of text, or anywhere between the beginning and end. The effect of the attribute can be mixed within a paragraph, or control the entire paragraph. The Font Tag cannot cross other HTML tags or elements.
The Font Tag must have a closing tag </Font>, and where font attributes are mixed within a paragraph the Font Attribute must begin with the <Font> and end with the </Font>, tags. Because the Font Tag is always pared with its closing tag we can “Nest” Font Attributes within a paragraph creating a graphical display of text.
There are many “wysiwyg” HTML editors on the market that will insert the Font Tags and Attribute for you automatically. There are just as many different ways to insert the Font Tags and Attributes as there are editors. We will show you the correct way to install Fonts and Attributes so the browser will render your web page in the quickest manner possible.
|
| Font Face - Font Name |
Font Face, also called Font Name and Font Family, is the name of a Font installed on your computer and we hope on the computers your visitors have. This is where Web Design becomes “Exceedrin Headache #99”. We have no way of knowing what Fonts are installed on other peoples computer systems. If you insert a fancy script Font into your web page, and your visitor does not have that font installed on his/her system, your fancy script Font will be displayed in whatever ugly font his/her browser has set as “Default Font”.
We have a way of working around this inconsistency on the Internet, we insert several popular Fonts in series so the browser can pick the first available Font and render your page with some sense of designer control. These Font Names are in the order of the most popular Operating Systems in use as of this writing. Microsoft Windows 95/98 SE/NT/ME/2000, XP, Vista, Apple Mac, Unix and Linux; respectively Times New Roman, Arial, Times, Helvetica, Sans-Serif. These Fonts are included with their respective OS at the time of installation. If you want to use a fancy Font place its Font Name first in order, then include all the rest.
An alternative to the above method is to create a small image with a transparent background to contain your fancy font characters, this method is often used to create stylistic page title and subtitles within the page. A transparent background is used to match the background color and texture of your web page.
The basic Font Tag: <font face="Arial">This is Font Face</font>
Cross browser and OS Font Tag: <font face="Times New Roman, Arial, Times, Helvetica, Sans-Serif">This is Font Face</font>.
Notice that the group of Font Names is surrounded by double quotes, and that each Font Name is separated by a comma and space. |
| Font Size |
Font Size determines the character size the browser will use to render your text. Just like in Font Name, Font Size has evolved from many different OS and browsers. In specifying the size of a font we rely on a relative sizing method, relative to the basefont the web browser uses as the default font size. The actual size displayed on the browser may differ from one browser to another and from one OS to another. The only way to get around this is with advanced web design techniques called; Cascading Style Sheets.
Taking the example of Font Face above and adding Font Size to the Font Tag we have the following structure:
<font face="Times New Roman, Arial, Times, Helvetica,
Sans-Serif" Size="2">This is Font Face</font>
Notice how the “Size=”2” is inline with the Font Face attribute, this allows us to include all the Font Attributes with just one opening Font Tag and one Font Closing Tag. This is where “wysiwyg” editors fall apart, for each attribute; they include separate opening and closing tags.
|
| Font Color |
Font Color allows you to set the color of the text to any value you want; the color spectrum is yours to command. Like the other Font Attributes, Color has been modified from old browsers and OS systems that could only handle 16 colors, then 256 colors, and now 16 million colors. The majority of web browsers and OS today have the capability to display 16 million colors.
We highly recommend that you study your page background colors and then decide on contrasting colors for your fonts, this will make it a lot easier for your visitors to read your words of wisdom.
To pick your Font Color out of 16 million possibilities, you will need a Graphics Program that will display your colors in the “HEX” code used by your OS. The HEX code consists of the “#” symbol followed by 6 numbers representing the 16 million colors. As an example the HEX Code for White is: #FFFFFF, and Black is: #000000.
An example of using colored fonts: <font face="Times New Roman, Arial, Times, Helvetica, Sans-Serif" color="#000000">This is Font Color Black</font>.
The alternative is to call your basic colors by name, but you restrict yourself to only the 16 basic colors. Those colors are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, and White. The HTML code sample and HTML Page Sample will use the named colors for fonts and the HEX number for page background color.
The sample code.
This is how it should look in your Browser. |
|
|
|
