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=" ">
Copy after login
- 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.
<body>
<p> <font size="2" color="blue" face="Calibri"> </font>
</p>
</body>
Copy after login
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:
<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of Font Tag in HTML </h2>
<p>General text without any Font tag attribute value</p>
<p>
<font color="orange">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 size="3">Text with Increased font size having default font type. </font>
</p>
</body>
</html>
Copy after login
Code:
Output:
Example #2
Define the font tag with its attribute value defined through CSS:
<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>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>
</body>
</html>
Copy after login
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:
<!DOCTYPE html>
<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<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>
</body>
</html>
Copy after login
HTML Code:
Output:
Example #4
<!DOCTYPE html>
<html>
<head>
<title>HTML tag with Font Type attribute</title>
</head>
<body>
<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/>
</body>
</html>
Copy after login
HTML Code:
Output:
Example #5
<!DOCTYPE html>
<html>
<head>
<title>HTML Font tag-Color </title>
</head>
<body>
<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>
</body>
</html>
Copy after login
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
