About font design in HTML Web page design

Font settings are the first difficulty that web page makers encounter. How to control the font size, how to remove the hyperlink font underline is the most asked by a netizen. Well, let's take a thorough look at every aspect of the font:

setting of the character set.

When looking at the HTML file's original code, we can often see this code between the header

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

What is the function of this piece of code? Is it possible to delete it?

In fact, this is the META tag Set statement, is for the browser to see. Its role is to tell the browser: This HTML file is made using the gb2312 character set. When the browser reads this code, it interprets and translates the page's original code in the gb2312 character set, and then we can see the correct page. So this meta statement is very important and try not to delete it.

GB2312 is our most familiar GB simplified code, English is the iso-8859-1 character set. Other character sets, such as big5,utf-8,shift-jis,euc,koi8-2, are used for different font displays.

The use of fonts.

In the Web page, the definition statement of the font is: <font face= "Arial" > Display text </font>

Where Arial is the name of a font.

The default browser-defined standard font is the Chinese Arial and English Times New Roma font. That is, if you don't have any fonts set, the page will appear in both of these standard fonts. At the same time, two of fonts can be displayed correctly in any operating system or browser.

Windows has also brought in more than 40 English fonts and 5 Chinese fonts. These fonts, you can also freely use and set up in the Web page. Browsers that use the Windows operating system can display these fonts correctly, but in other operating systems, such as UNIX, they are not fully displayed correctly.

If you need to use a special font to reflect your style, then how do you get people to really see your design page? The solution is: with pictures.

You will need to use this font in place of the picture to ensure that all people see the page is the same effect.

style of the font.

There are four types of fonts: normal (regular), Italic (italic), Bold (bold), Bold italic (bold italic). Set the method is very simple, Atzie not much wordy.

The effect of the font.

This refers to the effect that can be directly displayed by setting HTML language, and the statement in HTML is set to:

<span style= "Text-decoration:overline" > Display text </span>

Among them, overline refers to the effect of the underline. Other commonly used effects are: underline (underline), uppercase (uppercase), and so on.

Control of font size.

The control of font size is the focus of this section.

General font The default size is 12pt (pound). Use the <font size= "+1" > statement to increase the text by 2pt. We have mastered this method. And now the network's most popular small Chinese font size of 9pt, is how to set it? There are three different ways:

1. Use "<span style=" font-size:9pt "> Display text </span>" statement to set.

Obviously this method is very troublesome and you have to set the size for each piece of text.

2. Cascading style sheets with CSS. CSS is an integral part of DHTML, which defines the font display style and size of the entire page. is a more convenient method. For example, you need to set the entire page text size to 9pt, just add the following code to the HTML code between

<style type= "Text/css" >

<--

Body {font-size:9pt}

th {font-size:9pt}

td {FONT-SIZE:9PT}

-->

</style>

Where font-size:9pt refers to a font size of 9 pounds

3. The second method has simplified many steps, but it is still not the ideal method, because you have to place such a piece of code in the head area of each page to enlarge the file's byte. Another major drawback of this approach is that if I need to modify the entire site font size, it must be a page-by-page change!

So recommend to you is also the best method at the end---the external Touch board file invoke method.

"External Touch Board call" means that you make CSS settings as a separate file, in each page call it. Once you need to change the font size, as long as you modify a. css file, hundreds of pages are modified at the same time. (This method is similar to the subroutine called the program to write the user is easy to understand:)

The specific methods to invoke are as follows:

(1) Copy the above CSS code into a mycss.txt file, and then modify the suffix named Mycss.css

(2) inserting the <link href= "Mycss.css" Rel=stylesheet type=text/css> between the HTML files

Statement to invoke MYCSS.CSS (note that the path is set correctly) ok!

The font hyperlink style setting.

Usually set the color of the connection in the <body> of the Web page, such as: <body link= "#FF00FF" vlink= "#FF0000" alink= "#008080" >

Where: Link--Hyperlink (connection) color

vlink--visited Hyperlink (visited connection) color

alink--Active Hyperlink (currently active connection) color

The color is #ff0000 with an RGB 16 code, such as red.

Also use CSS can be easier to set the style of the page hyperlinks, look at the following code

<style type= "Text/css" >

a:link {text-decoration:none; COLOR: #0000FF}

a:visited {text-decoration:none; COLOR: #000000}

a:active {text-decoration:none; COLOR: #FF0000}

a:hover {COLOR: #FF0000}

</style>

Insert it into the head area of the HTML file. Link is set to have a hyperlink color, visited is the hyperlink color visited, active is the mouse to move up the color, hover is the mouse click Color. and "text-decoration:none" means to suppress the underscore display of hyperlinks.

There are more uses and techniques for CSS settings, such as setting different font sizes and hyperlink colors on the same page, please learn about CSS expertise Here we are not redundant.

The above has covered all aspects of the technology of the font. About the design of the use of fonts, there is no mature theory, the following is a few web design fonts in the use of the principle, for reference only:

1. Do not use more than 3 kinds of fonts. Too many fonts are messy, without themes.

2. Don't use too large a word. Because the layout is valuable, limited, rude big font can not bring more information to visitors.

3. Do not use the flashing text. Do not use blinking text if you want the viewer to stay for a while longer.

4. In principle the font of the title is larger than the text and the color should be different.