Make fonts in webpages beautiful

You may be creating your own home-web page on the Internet, or it has been placed in a certain corner of the network. No matter what the purpose is, you want to have more guidance to tell you how to better arrange your home.

At present, many of them are telling us that a sound or a venue should be added. We all need it, but I want to care about more things at the bottom of the Web home, such as how to make the font more beautiful or make the page color more lively, add "desire to see" to visitors, and more nuances that you have never followed before. Today, we will first discuss the font of the page.

I. Define fonts in HTML

The font is really easy to deal with. When you create a page, it will be displayed in the default style. Gradually, you will change the default settings to increase or decrease the font size.

Default label format for general fonts: <p> 9 network interconnection </P>

Next, we will set the font to the or style. Its labels are as follows:

<P> <font face = ""> 9 network interconnection </font> </P>

In the preceding format, the font label element <font> </font> is introduced. The label has the following three attribute values:

Size = "..." sets the font size, generally from 1 to 7. Its default value is + 3. Each time the font is changed, it is + 3 or-3.

Color = "..." font color settings. You can use the hexadecimal value of RGB to define the color, for example, color = "# ffffff ". You can also define the color in English, for example, color = "white"

Face = "..." Font Style settings, such as: face = "". Or face = ", ". The latter format. When the Browser fails to access the first font, the browser will access the second font, and so on.

The following is a complete font format:

<Font face = "" size = "2" color = "# ffffff"> 9 network interconnection </font>

HTML also provides the following font style labels:

1. Six title styles

From H1 to H6, for example:

2. Font Style

Italics: <em> 9 network interconnection </em>

Bold Chinese: <strong> 9 network interconnection </strong>

Italics + bold characters: <strong> <em> 9 network interconnection </em> </strong>

3. Definition text

Define large font

<Big> 9 network interconnection </big>. If you want to increase the font size, you can use, <big> 9 network interconnection </big>

Define small font
<Small> 9 network interconnection </small> or <small> 9 network interconnection </small>

If you set size = "..." in the font label, the <big> label does not work.

In addition to the commonly used Font Tag elements, HTML also contains many other tags, but we do not use them.

Ii. CSS (stacked style sheet) changes the font

In the past, the font on the page was static and stayed there quietly. When DHTML (dynamic web page) appears, we can control the font in more ways. In general, the core of dynamic font implementation is CSS (stacked style sheet) and JavaScript. After the above two technologies are used, the font can change a lot.

1. CSS defines the font label elements

Font-family: Set the font family.

<Span style = "font-family:, (GB)"> 9 network interconnection </span>

Font-sytle: Set the font type.

<Span style = "font-style: normal"> 9 network interconnection </span>

Font-weight: Set the font weight.

<Span style = "font-weight: bold"> 9 network interconnection </span>

Font-size: Set the font size.

<Span style = "font-size: 14pt"> 9 network interconnection </span>

Font-Decoration: modifies text fonts, such as underlined "underline ".

<Span style = "text-Decoration: underline"> 9 network interconnection </span>

For the above font settings, we can use a convenient method:

<Span style = "Font: normal bold 14pt "> 9 network interconnection </span>

The Order Defined in style is: font-style, font-weight, font-size, font-family.

2. CSS-defined font conflicts with <font> defined font

Pay attention to the following issues when CSS and <font> font are defined, such as the following font settings:
<Span style = "font-family: (KSC); font-size: 200pt"> <font> 9 network interconnection </font> </span>

In this case, the font size is defined as font-size: 200pt. However, if you add the size attribute to <font>, for example:

<Span style = "font-family: (KSC); font-size: 200pt"> <font size = "5"> 9 network interconnection </font> </span>

At this time, the font size is subject to the size setting. Font-size: 200pt will not work. The same applies to other attributes. If you do not need a dynamic font, you can use html4.0 <font> to define the font. When you need a dynamic font, you need to use CSS and javascrui to define the font and trigger events.

3. Define CSS font attributes

when creating a dynamic font, we use CSS to define the entire attribute of the page font, and then reference it in the page, instead of setting each text segment, this is also the first step to implement dynamic fonts.

9 network interconnection

in the preceding Code , the word "9 network interconnection" is referenced. the font style defined by main_2 class. Of course, you can define different font styles in to reference different fonts on the page. For example:

9 network interconnection

9 network interconnection

for CSS (stacked style sheet) for more information, see download tutorial , download and study it.

3. Change the font

To make the font work, we can use its own CSS events or make JavaScript trigger events.

1. events triggered by CSS

Example 1
<HTML>
<Head>
<Style type = "text/CSS">
</Style>
</Head>
<Body>
<P> <a href = "http://www.ninedns.com/"> 9 network interconnection </a> </P>
</Body>
</Html>
Link defines the color (black) of The Link displayed on the page and the link is not underlined. Visited defines the color (white) after the link is clicked ), hover defines the dynamic color when pointing to the link. The above example indicates that the font color changes from black to blue after pointing to the link "" and is underlined. After clicking the link, the link color changes to white.

Example 2
<HTML>
<Head>
<Title> </title>
</Head>
<Body>
<P onmouseover = "This. style. fontsize = 200" onmouseout = "This. style. fontsize = 100"> 9 network interconnection </P>
</Body>
</Html>
The above example uses inline to change the font style. When the mouse points to "9 network interconnection", the font defines this. style. fontsize = 200. These two words are enlarged to PT. When you move the mouse away from "9. Net interconnection", this is defined. style. fontsize = 100. These two fonts are reduced to PT.

2. Events are triggered by JavaScript.

<HTML>
<Head>
<Style>
H1.italic {font-style: italic}
H1.bold {font-style: bold ;}
</Style>
</Head>
<Body>
<Script language = "JavaScript">
Function changehead (){
If (h1_1.classname = "bold "){
H1_1.classname = "italic "}
Else {
H1_1.classname = "bold ";}
}
</SCRIPT>
<H1 id = "h1_1" class = "bold" onmouseover = "changehead ()" onmouseout = "changehead ()"> 9 network interconnection </Body>
</Html>

In the above example, we first defined two CSS classes h1.italic and h1.bold, then used JavaScript scripts to define the function changehead (), and finally triggered the event to execute the defined function. Here we raise two click events onmouseover and onmouseout. Here I would like to add one point, because you have defined two classes h1.italic and h1.bold In H1, so when you reference them, you must first set class = "bold ", indicates that the font appears in bold. Then, move the mouse to "9 network interconnection" and trigger event 1. When "9 network interconnection" is removed, event 2 is triggered.

There are still many ways to improve dynamic fonts. When considering the use of dynamic fonts, different browsers may produce different results. At this time, we need to keep testing to find a perfect solution. Finally, I hope you have read this article.ArticleFind out a bit about CSS and JavaScript, because they are the tool to realize all "Dreams.