HTML - Fonts

Trang chủ » Html Font Face Sans Serif » HTML - Fonts

Có thể bạn quan tâm

HTML - Fonts Previous Next

HTML fonts play an important role in making a website more user-friendly and increasing content readability. Font face and color depend entirely on the computer and browser that are being used to view your page, but you can use the HTML <font> tag to add style, size, and color to the text on your website. You can also use a <basefont> tag to set all of your text to the same size, face, and color.

HTML <font> Tag

The HTML <font> tag specifies the size, color, and face (family) of the text to be displayed on the webpage.

The <font> tag has three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag with the attribute names and values. 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.

The font and basefont tags are deprecated, and they are supposed to be removed in a future version of HTML. So they should not be used; rather, it's suggested to use CSS styles to manipulate your fonts. But still, for learning purposes, this chapter will explain font and basefont tags in detail.

Set Font Size

To set the font size of a web page, we use the size attribute. This attribute allows us to set the font size between 1 and 7, where 1 is the smallest font size whereas 7 is the largest. The default size of a font is 3.

Example

The following example shows how to use the "size" attribute of the <font> tag to set the font size:

<!DOCTYPE html> <html> <head> <title>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>

Relative Font Size

In HTML, relative font size means specifying how many sizes larger or smaller than the preset font size should be. We can specify it like <font size = "+n"> or <font size = "−n">

Example

The code below demonstrates how to set the relative font size of texts in a web page:

<!DOCTYPE html> <html> <head> <title>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>

Setting Font Face

You can set the font face (family) using the face attribute, but be aware that if the user viewing the page 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

In this example, we are setting multiple font faces to the text by using the "face" attribute:

<!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>

Specify Alternate Font Faces

A visitor will only be able to see your font if they have that font installed on their computer. So, we can specify two or more font face alternatives by listing the font face names, separated by a comma.

<font face = "arial, helvetica"> <font face = "Lucida Calligraphy, Comic Sans MS, Lucida Console">

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font, Times New Roman.

Setting Font Color

We can set any font color of our choice to the texts using the color attribute. To specify the color, we can use either the color name or hexadecimal code of that color.

Note − You can check a complete list of HTML Color Name with Codes.

Example

The following example illustrates how to set color to the texts on a web page:

<!DOCTYPE html> <html> <head> <title>Setting Font Color</title> </head> <body> <font color = "#FF00FF">This text is in pink</font><br /> <font color = "red">This text is red</font> </body> </html>

The <basefont> Element

The <basefont> element is used to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.

Like the <font> tag, 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

In the below HTML code, we are illustrating the use of the "basefont" tag:

<!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> <h2>Example of the &lt;basefont&gt; Element</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>

The above HTML code will produce four line of text with different font face, color and sizes.

Using Web Safe Fonts in HTML

CSS3 has adapted font combinations technology. If the browser doesn't support the first font, then it tries the next font. Here is the list of CSS Web Safe Fonts.

HTML Fonts Reference

Read more about HTML fonts, visit: HTML Fonts Reference

Print Page Previous Next Advertisements

Từ khóa » Html Font Face Sans Serif