HTML Font

Font face can be changed in a web page by using html font tags. However, font size and color of this tag to determine the font, size, color attributes are used. This tag does not support HTML 5, CSS can be used instead.

The syntax or format: <font face=”font-family”>……  <font/>

Writing coding rules:

The format will be for single font: <font face=”impact”> ……. </font>
The format will be for font group: <font face=”Sans Serif, Comic Sans Ms,”> ……. </font>

Font Family: Some Font Name.

Arial Century Gothic Impact Trebuchet Ms
Arial Black Comic Sans Ms Lucida Console Verdana
Arial Narrow Courier New monospace Serif
Bookman Old Style Georgia Times New Roman
Example: Use of single fonts

Type the following codes in Notepad or other html editing software. When you open the single_ font.html file, you will see output like the following.

HTML code:

<html>
<body>
Element is the main center of<font face=”impact”> HTML</font>
</body>
</html>

Display in Browser:

Element is the main center of HTML

Example: Use of the font Group.
Type the following codes in Notepad or other html editing software. When you open the single fontgroup_font.html file, you will see output like the following.

HTML code:

<html>
<body>
<font face=”FancyFont,Verdana,Tahoma,Arial”>
Hi, friends how are you? Where are you going now?</font>
</body>
</html>

Display in Browser:
Hi, friends how are you? Where are you going now?

Apply styles in font:

By coding in this </ style> tag, You can change the font style.<br /> The coding format will be as follows:

<style>
p{font-family:Arial, georgian;}
or
p{font: Arial, georgian;}
or
body{font-family: Verdana;}
</style>

Coding, format can be changed as follows:

<p style=”font-family: verdana”>
<body style= “font-family: verdana”>

Example: Type the following codes in Notepad or other html editing software. When you open the font_style.html file, you will see output like the following.
HTML code:

<html>
<style>
<body font-family: Verdana;>
</style>
</body>
HTML is the short form of Hypertext markup language.
It is a standard markup language that is used to make web document.
HTML language has been created with some markup tag.
</html>

Display in Browser:

HTML is the short form of Hypertext markup language.
It is a standard markup language that is used to make web document.
HTML language has been created with some markup tag.

Another example for practice:

Type the following codes in Notepad or other html editing software. When you open the font_style1.html file, you will see output like the following.

HTML code:

<html>
<body>
<h2 style=”font-family:Verdana”>What is html5?</h2>
<p style=”font-family: courier”>
HTML5 Programming is the next generation of HTML. Most of HTML5 is very similar to previous versions of HTML, having minor tag changes and additions.</p>
</body>
</html>

Display in Browser:

What is html5?

HTML5 Programming is the next generation of HTML. Most of HTML5 is very similar to previous versions of HTML, having minor tag changes and additions.

Change the font size:

Font Size is very important for the presentation of Web pages attractively. The default font size is 12 points (16 pixels). These values may be. If you want to change the font size arbitrarily, you need to use different units or values of the font size attribute. These values may be.

Pixels (px)
Points (pt) [1=8pt, 2=10pt, 3=12pt, 4=14pt, 5=16pt]
Percent (%)
em (1em=12pt=16px=100%)
Note: The values of the font are set to the beginning of the tag.

Coding example: How to change the font size?

1. <font size= “20”>
2.<font size =”3″ face=”Tahoma” color=”red”>
3. body{font-size: 100%}

How to change font size by applying styles?

1.  <font style=”font-size: 30 px;”>
2.  <p style=”font-size: 20px;”>
3.  <p style=”font:Arial; font-size=30px;”>
4.  <h1 style=”font-size: 140%; color: #ff0000;”>

Change the font size by pixel:

PX meaning is a pixel. Each dot is a single pixel of the monitor.The capacity of 960 pixels of 1024 pixel wide screens on the right side without space of the slide bar.

Example:Type the following codes in Notepad or other html editing software. When you open the single font_size.html file, you will see output like the following.
HTML code:

<html>
<body>
<font style=”font-size:30px”>The visible text goes here and will look like this.</font>
</body>
</html>

Display in Browser:

The visible text goes here and will look like this.

Change the font size by percent :

Example:Type the following codes in Notepad or other html editing software. When you open the single font_size_percent.html file, you will see output like the following.
HTML code:

<html>
<body>
<font size=5%>The visible text goes here and will look like this.</font>
</body>
</html>

Display in Browser:

The visible text goes here and will look like this.

Change the font size by number:

Any positive or negative number from 1-7 using the font size of the text can be changed. When applied +1 value of the font the font size will increase 2 points and it will decrease 2 points when applied -1 value.

1,2,3,4,5,6,7
+1,+2,+3,+4,+5,+6
-1,-2,-3,-4,-5,-6
Syntax:

Tag format is used for that:

1.  <font size=”6″ ……….</font>
2.  <font face=”courier New” size=+1>….</font>
3.  <font size= +2>……</font>
4.  <font size=”3″ face=”Arial”….</font>
5.  <font size=+2 color=”#000ff” face=”verdana”>….</font> 1.

Example:Type the following codes in Notepad or other html editing software. When you open the font_size2.html file, you will see output like the following.

HTML code:

<html>
<body>
Are you <font size=”5″>Mr. Ganesh karmakar?</font>
</body>
</html>

Display in Browser:

Are you Mr. Ganesh karmakar?

Larger text fonts:

This tag is used to represent text a little bigger than the default font text. If the default value of font size is 12 points, then it will become 14 points. The tag format is <big></big>. Between these two tags, which will be written the tag will be presented as a little bit bigger. More tag with the big tag attached can do a larger text. For that the coding format will be like following.

<big><big>………………………………………………………………..</big>

Text font can be small:

This tag is used to represent text a little smaller than the default font text. If the default value of font size is 12 points, then it will become 10 points. The tag format is <small></small>. Between these two tags, which will be written the tag will be presented as a little bit smaller. More tag with the small tag attached can do a larger text. For that the coding format will be like following.

<small><small>………………………………………………………</small>

or
css style: small{font-family: Arial; font-size: 0.5 em;}

Example:Type the following codes in Notepad or other html editing software. When you open the big_small.html file, you will see output like the following.

HTML Code:
<html>
<body>
<big><big> Digital india </big>is a new world,</big> a new dream.
<small><small>Digital india</small> is a new world,</small> a new dream.
</body>
</html>
Display in Browsers:

Digital india is a new world, a new dream.
Digital india is a new world, a new dream.

Idea about font color:

The use of color is quite important to expose the surfaces of the web pages. All browsers support colors.For determining the color directly, color name or red, green, and blue color values , or hex code can be used. In the case of hexadecimal color codes to use the pound (#) mark. For example: # 0055. Browser support is also available with the name of the color of a certain color name is as follows:

Color name

Black Gray Silver White Yellow Lime Aqua Fuchsia Red
Blue Purple Maroon Olive Navy Teal Powderblue Lightblue Green

 

Below  some of the color names and their code are mentioned used for color:

Color R G B RGB/HEXA
White FF FF FF

#FFFFFF

Black 00 00 00 #000000
Red FF 00 00

#FF0000

Green 00 FF 00

#00FF00

Orange FF A5 00

#FFA500

Yellow FF FF 00 #FFFF00
Violet EE 82 EE

#EE82EE

Blue 00 00 FF

#0000FF

Sky 87 CE EB

#87CEEB

Changing the font color:

Heading, paragraph, and font color of the body can be changed by color attribute. For these hex or RGB values of directly color names that are mentioned on this attribute.
For example:

1.  color_name= red
2.  hex_number=”#ff0000″
3.  rgb_number=”rgb(255,0,0)”

You can use the numbers 1-9 and the letters till A-F. If you are using any number of nearby “0”the color levels will be low and use any letters of nearby “F”the color levels will be higher.

syntax or format

<font color=”color_name|hex_number|rgb_number”
Example:
<font color=”#0000ff”></font>
<font color=”red”></font>

Example:Type the following codes in Notepad or other html editing software. When you open the font_color.html file, you will see output like the following.

HTML code:

<html>
<body>
<font color=”#00FF00″>This will make your text green.</font>
<font color=”red”>This will make your text red.</font>
</body>
</html>

Display in Browser:

This will make your text green.
This will make your text red.

Leave a Reply

Your email address will not be published. Required fields are marked *