Pages

Tuesday, May 6, 2014

HTML font

The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.

 
Note: The <font> and <basefont> tags are deprecated and should not be used for published work. Instead, use CSS styles to manipulate your font

html - font size:

Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.

HTML Font Size Code:

1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}
Display:
Here is a size 5 font.
Example: 2
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>
Display:
Here is a size 5 font
{} Display: Here is a size 5 font. Example: 2 Font size="1" Font size="2" Font size="3" Font size="4" Font size="5" Font size="6" Font size="7"

Specify the relative font size:

<font size="+n"> or <font size="-n">:
You can specify how many sizes larger or how many sizes smaller than the preset font size should be.
<font size="-1">Font size="-1"</font>
<font size="+1">Font size="+1"</font>
<font size="+2">Font size="+2"</font>
<font size="+3">Font size="+3"</font>
<font size="+4">Font size="+4"</font>

Display:
Font size="-1" Font size="+1" Font size="+2" Font size="+3" Font size="+4"

 

html-font color:

Set the color of your font with color.

HTML Font Color Code:

<font color="#990000">This text is hexcolor #990000</font>
<br />
<font color="red">This text is red</font>

Display:
This text is hexcolor #990000 
This text is red

Html-font face:

Choose a different font face by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below.

HTML Font Face Code:

<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>
Display:
This paragraph has had its font...
 
In the example above, we have changed the font face (type) of a paragraph element and specified a list of similar fonts to apply to this element in the case that some of our viewers do not have these fonts installed.

 

Example :
<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>

Display:
Times New Roman
 Verdana
 Comic Sans MS 
WildWest 
Bedrock

Specify alternate font faces:

A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
Example:
<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console>
When your page is loaded, their browser will display the first font face that it has available. If none of your selections are installed....then it will display the default font face Times New Roman.

Html font Attribute review:

HTML Font Attributes:

Attribute=
"Value"
Description
size=
"Num. Value 1-7"
Size of your text, with 7 being biggest
color=
"rgb,name,or hexidecimal"
Font color
face=
"name of font"
Font type
( BASEFONT)

The <basefont> Element:

The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> element. You can then use the <font> elements to override the <basefont> settings.
The attributes that the <basefont> element takes are exactly the same as for the <font> element. You can also set the size of fonts relative to the size of the <basefont> by giving them a value of +1 for a size larger or -2 for two sizes smaller
NOTE: This element is deprecated in HTML 4 and will be removed from HTML, the preferred option is to use CSS styles. Your browser may not have support for this tag.
Example: 1
<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="darkgray">Here is some darkgray text
two sizes larger</font></p>
<p><font face="courier" size="-1" color="#000000">Here is a courier
font, a size smaller, in black</font></p>
Display:
This is the page's default font.

Example of the <basefont> Element

Here is some darkgray text two sizes larger
Here is a courier font, a size smaller, in black


As you can see, the default font now takes on the properties specified in the <basefont> element. It is red, size 2, and uses the Arial typeface.
The paragraph after the <h2> element uses a font size two sizes larger than the default size and is gray text, whereas the following paragraph uses a font one size smaller than the default font. You can also see that the color of this font is black (overriding the default).
Example: 2
<html>
<body>
<basefont size="2" color="green">
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
</basefont>
</body>
</html>
Display:
This paragraph has had its font...
This paragraph has had its font...
This paragraph has had its font...


Beautiful first letter style:

Customize your fonts to achieve any desired look.

HTML Code:


1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>

Display:
Customize your font to achieve a desired look.

No comments:

Post a Comment