Sunday, November 26, 2017

Html Fonts

Hello guys! morning to you all, before i continue i wanna apologise to you all for not making any post for so long now, without wasting much time in my previous tutorial i talked about HTML backgrounds and the different ways we can style our HTML background using either colors or images.
So in this tutorial am going to be talking about HTML fonts and the various font sizes and font families supported by HTML.
Font play a very vital role in making a webpage more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to the the webpage but at the same time you can also use HTML <font> tag to add style, size, and color to the text on the website, you can use a <basefont> tag to set all of the text to same size, face, and color.
The font tag is having three attributes called size, color, and face to customise your fonts. To change any of the font attributes at any time within the webpage, simply use the <font> tag. The text that follows will remain changed untill you close with the closing </font> tag. You can change one or all of the font attributes within one <font> tag.
Note: The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should noth be used rather, it's suggested to use css styles to manipulate your fonts. But still for learning purpose, this tutorial will explain font and basefont tags in detail.

Set Font Size 
You can set content font size using size attribute. The range accepted values is frm 1(smallest) to 7(largest). The default size of a font is 3. Lets quickly look at the example below for better understanding of what we realy talking about.

Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">First Font Size</font><br />
<font size="2">Second Font Size</font><br />
<font size="3">Third Font Size</font><br />
<font size="4">Fourth Font Size</font><br />
<font size="5">Fifth Font Size</font><br />
<font size="6">Sixth Font Size</font><br />
<font size="7">Seventh Font Size</font>
</body>
</html>

Now if you try the above codes in your text editor you will find out that their font sizes are all different starting from the smallest to the largest, you can try the above codes out your self for better understanding and feel free to drop your questions on the comment box.

Relative Font Size   
You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">. Lets take a look at the example below.


Example
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">First Font Size</font><br />
<font size="+1">Second Font Size</font><br />
<font size="+2">Third Font Size</font><br />
<font size="+3">Fourth Font Size</font><br />
<font size="+4">Fifth Font Size</font>
</body></html>
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.

Setting Font Face
You can set font face using face attribute but you have to be aware that if the user viewing the webpage doesn't have the font installed, they will not be able to see it. Instead the user will see the default font face applicable to the user's computer.


Example
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman"  size="5">Times New Roman</font><br />
<font face="Verdana"  size="5">Verdana</font><br />
<font face="Comic Sans Ms"  size="5">Comic Sans Ms</font><br />
<font face="Wildwest"  size="5">Wildwest</font><br />
<font face="Bedrock"  size="5">Bedrock</font><br />   
</body></html>
You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.

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 nams, separated by a comma. 

<font face="airial,helvetica">

<font face="Lucida calligraphy,comic sans ms,">
 

You will find out that when your page is loaded, your browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
 

Setting Font Color 
You can set font color of your choice by using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Let look at a brief example below#
 

Example 
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FFFFFF">This text is in white color</font><br />
<font size="orange">This text is in orange color</font><br />
</body> 

</html>

From the above code i made use of two examples, in the first one a hexadecimal code was used to set the color white to the text, while i made use of a color name in the second.

You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.
 

The <basefont> Element  
The <basefont> element is supposed to set a default font size, color, and typeface for any part of the HTML page that are not otherwise contained within a <font> element or tag. You can use the <font> elements to override the <basefont> settings.

The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller.
 

Example 
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>

<body>
<basefont face="arial, verdana, sans-serif" size="2" color="brown">
 <p>This is the page's default font.</p>

<h2>Example of the &lt;basefont&gt; Element</h2>
<p><font size="+2" color="blue">
This is a blue text with two sizes larger
</font></p>

<p><font face="arial" size="-1" color="green">

This is an arial font, with a size smaller and green in color.</font></p> 

</body> 
</html>

You can try the above code out for better understanding and always feel free to ask your questions in areas you don't understand.

Alright thats it for this tutorial, don't forget to subscribe with us, bye for now.



Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds

Share:

0 comments:

Post a Comment