Font Tag in HTML

Font Tag in HTML is one of the most important attributes used to make webpage or HTML documents more attractive. It has the properties to change the size, color, and style of included text. With the help of a font tag, one can make a web page’s size, color, and face in the same text format. This tag mainly works on three major attributes like size, Face or Type and color. Font tag works as an inline element in HTML to change some features of block text in HTML documents. The text enclosed within tag is used to define style to the text included in it.

Syntax:

<font size=" " face=" " color=" "></font>

• Above syntax status that font size is the attribute into the syntax is used to set the specific size to the text. This size can be defined in number from 1 to 7, where 1 is for the smallest text and 7 for the largest text size. The face attributes in the font tag used to define the type of font type in our HTML document, whereas the color attribute is used to define the specific color to the enclosed text. 
• HTML tag used within the tag. It’s define using .. tag in HTML.

<p> <font size="2" color="blue" face="Calibri"> </font>
</p>

This tag supports Global as well as Event attributes too. Also, it supports some other attributes which areas listed below:

Attribute Name	Detail Description
Size	This attribute is used to define a specific size for text in between 1 to 7.
Face or type	This attribute is used to define the font type for the included text.
Color	This attribute is used to show enclosed text in a different color.
Weight	This attribute defines the boldness of the text of the font tag.

Attribute Name

Detail Description

Size

This attribute is used to define a specific size for text in between 1 to 7.

Face or type

This attribute is used to define the font type for the included text.

Color

This attribute is used to show enclosed text in a different color.

Weight

This attribute defines the boldness of the text of the font tag.

Examples of Font Tag in HTML

Font tag can be used in two ways in HTML code, first as include font tag and its attribute value through HTML and second is by using define attribute value as CSS code. Both will generate the same output. The only difference in defining attributes value.

Example #1

Defining font tag with its attribute value:

html>


<title>Font Tag in HTML</title>


<h2 id="Example-of-Font-Tag-in-HTML">Example of  Font Tag in HTML </h2>
<p>General  text  without any Font tag attribute value</p>
<p>
<font>Text having normal font size and font face . Only changing
font   color  </font>
</p>
<p>
<font face="cursive">Text having different font face.</font>
</p>
<p>
<font>Text with Increased font size having default font type. </font>
</p>

Code:

Output:

Example #2

Define the font tag with its attribute value defined through CSS:

<title>Font Tag in HTML</title>


<h2 id="Example-of-Font-Tag-in-HTML-using-CSS">Example of Font Tag in HTML using CSS </h2>
<p>Someone’s sitting in the shade today because someone plated a tree a long time ago. </p>
<p style="color : lightgreen;"> Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font-family : Book Antiqua; color: blue; "> Someone’s sitting in the shade today because someone plated a tree a long time ago.
</p>
<p style="font size:3px;"> Someone’s sitting in the shade today because
someone plated a tree a long time ago.
</p>

Code:

Output:

Example #3

In this example, we are using a Font tag with attribute value size, which will define text from lowest size to highest size as shown below:

<title>HTML font tag</title>


<font size="1">People may doubt what you say, but they will believe what you do.</font><br> <br>
<font size="2">People may doubt what you say, but they will believe what you do.</font><br> <br>
<font size="3">People may doubt what you say, but they will believe what you do.</font><br> <br>
<font size="4">People may doubt what you say, but they will believe what you do.</font><br> <br>
<font size="5">People may doubt what you say, but they will believe what you do.</font><br> <br>
<font size="6">People may doubt what you say, but they will believe what you do.</font><br><br>
<font size="7">People may doubt what you say, but they will believe what you do.</font>

HTML Code:

Output:

Example #4

<title>HTML tag with Font Type attribute</title>


<font face="Comic sans MS"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br>
<font face="Bernard MT Condensed" color="Red">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br>
<font face="Algerian">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br>
<font face="Book Antiqua" size="5">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br>
<font face="Aharoni"> Correct one fault at a time. Concentrate on the one fault you want to overcome.</font><br>
<font face="AR BERKLEY">Correct one fault at a time. Concentrate on the one fault you want to overcome. </font><br>

HTML Code:

Output:

Example #5

<title>HTML Font tag-Color </title>


<font color="#cc0066"><b>It is terrible thing to see and have no vision</b></font><br>
<font color="#66ff33"><b>Today's preparation </b></font> <br>
<font color="#0000cc"><strong>Success depends on your backbone not your wishbone.</strong></font><br>
<font color="#cc3300"><b>Patience makes lighter what sorrow may not heal</b></font>  <br>
<font color="#666600"><b>Hold fast to dreams, for if dreams die, life is broken winged bird that cannot fly </b></font> <br>

HTML Code:

Output:

• Conclusion
It is used to display text in the same size, color and face format. The font tag is going to displayed by using .. tag.

From all the above information, we came to know that size, type of face, color are the key attributes in font style.

The above is the detailed content of Font Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!