Font Tag in HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Font Tag in HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:27 PM

html html5 HTML Tutorial HTML Properties HTML tags

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: Font Tag in HTML

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: Font Tag in HTML

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: Font Tag in HTML

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: Font Tag in HTML

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: Font Tag in HTML

Conclusion

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn