By using font tag we can control the display of fonts in a web page. Font tag is very commonly used tag in web page design. We will discuss some basic font tags and its uses in developing sites.
Using the font tag we can manage the size, color and face of the font. Here we can specify which font to be used for displaying the text. The face of the font can be Times New Roman or it can be Verdana font. What ever we specify the face of the font tag , that font must be available with the client computer. Otherwise default font will be displayed. So it is advisable to use common fonts and if you have any special requirement then create one image with the text and style of font you use and then display it as an image.
Font tag will have one starting and ending tag. The text between the staring and ending of the tags will follow the attributes set inside the tag. We can define the size of the font by using size attribute. Size can be from 1 to 7. Here is the basic font tag with size.
<font size=”1”>font size is 1</font>
font size is 1
<font size="2">font size is 2</font>
font size is 2
<font size="3">font size is 3</font>
font size is 3
<font size="4">font size is 4</font>
font size is 4
<font size="5">font size is 5</font>
font size is 5
<font size="6">font size is 6</font>
font size is 6
<font size="7">font size is 7</font>
font size is 7
Managing font size through CSS
We can apply our font size to any element of the page by using style property. Here are some examples.
Absolute - size keywords
We can define size by using keywords and set the value of the font. List of such keywords are here.
We can define in pixels like 14px, 18px etc. This will fix the size irrespective of parent font size. Bu using this we can define all child elements size related to this in relative terms like 80% ( i.e 80% of parent font size) .
We can relatively define the font size with respective to parent font size in ratio.
Example : 1.5em is equal the 1.5 times the font size of parent element. If parent element font size is 8px then the child element will be 1.5x8 = 12px.
If the font size is not set and the child element is set at 1.8em then the font size will be based on the browser default font size. Usually by default the browser font size is 16px. So in this case 1.8em will be equal to 1.8em=28.8px
Font size will be inherited from the parent font size.