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.
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
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 <basefont> 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 largerHere 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