Full width home advertisement

How To

Science

Post Page Advertisement [Top]


Fonts design makes a website more user friendly and increases content readability. Font face and color display depends wholly on the computer resolution and browser.

The <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

The font tag have three attributes which are size, color, and face which will be used customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.


How To Set Font Size

The HTML font <font> tag can be used to set font size using size attribute. The accepted values for the size attribute ranges from 1(smallest) to 7(largest). The normal size of a font is 3.

Example

<!DOCTYPE html>

<html>

<head>

<title>Scholars Setting Font Size</title>

</head>

<body>

<font size="1">Font size="1"</font><br />

<font size="2">Font size="2"</font><br />

<font size="3">Font size="3"</font><br />

<font size="4">Font size="4"</font><br />

<font size="5">Font size="5"</font><br />

<font size="6">Font size="6"</font><br />

<font size="7">Font size="7"</font>

</body>

</html>


How To Use Relative Font Size

The HTML <font> tag can be used to specify sizes, large or small than the present font size should be. 


You can specify it like <font size="+n"> or <font size="-n">

Example
:

<!DOCTYPE html>

<html>

<head>

<title>Scholars Relative Font Size</title>

</head>

<body>

<font size="-1">Font size="-1"</font><br />

<font size="+1">Font size="+1"</font><br />

<font size="+2">Font size="+2"</font><br />

<font size="+3">Font size="+3"</font><br />

<font size="+4">Font size="+4"</font>

</body>

</html>


How to Set Font Face?

Font face can be set using the face attribute. Note that if the user viewing the page doesn't have the font specified installed, they will not be able to see it. As an alternative 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>



How to Set Font Color

Color attribute
 can be used to set font color. You can indicate the color that you want by either the color name or hexadecimal code for that color.

Example
<!DOCTYPE html>

<html>

<head>

<title>Scholars Font Color</title>

</head>

<body>

<font color="#FF00FF">This text is in pink</font><br />

<font color="blue">This text is red</font>


</body>

</html>

Result:

Pink Color

Blue Color


The <basefont> Element:

The <basefont> element is used to set a default font size, color, and typeface for any parts of the web pages or document that are not within a delcared <font> tag. 

Example

<!DOCTYPE html>

<html>

<head>

<title>Setting Basefont Color</title>

</head>

<body>

<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">


<p>This is the page's default font.</p>

HTML

106

<h2>Example of the &lt;basefont&gt; Elesssment</h2>

<p><font size="+2" color="darkgray">

This is darkgray text with two sizes larger

</font></p>

<p><font face="courier" size="-1" color="#000000">

It is a courier font, a size smaller and black in color.

</font></p>

</body>

</html>

For result
: Save the above in index.html or test.html and open in any web browser.

No comments:

Post a Comment

Bottom Ad [Post Page]

| Designed by Colorlib