Getting Started: Problems with fonts in HTML design Web pages

Design | Web Page | questions

You may be building your own online-web page, or it has been placed in a corner of your network. For whatever purpose you want to have more guidance, tell you how to decorate your home better.

In many of the current guidance, they are saying, should add a little voice or a space to speak. Sure we all need it, but I want to care more about the bottom of the web, like how to make the font more beautiful, or make the color of the page more lively, so that visitors to increase the "desire to", there are more you have no attention to the nuances. Today, we first discuss the font of the page.

Definition fonts in HTML

The font is really good to deal with, the first to make the page, it is displayed in the default style. As you step deeper, you will change the default settings, increasing or decreasing the font.

Generic font default label format:<p> Web teaching </p>

Next, we set the font to the bold or italicized word style, which is labeled as follows:

<p><font face= "Bold" > Web Teaching Network </font></p>

In the above format, we draw out the label element <font></font> of the font; The label has the following three property values:

Size= "..." Set the size of the font, typically from 1 to 7, and its default value is +3, changing the font to +3 or-3 each time.

Color= "..." The settings for the font color. The definition color can take advantage of RGB's 16 binary value, for example: color= "#ffffff". can also be directly used to define the color of English, such as: color= "White"

Face= "..." Font style settings, such as: Face= "bold". or face= "black body, XXFarEastFont-Arial." In the latter format, the browser accesses the second font whenever a browser fails to access the first font, and so on.

The following is a complete font format:

<font face= "Bold" size= "2" color= "#FFFFFF" > Web Teaching Network </font>

HTML also provides the following font style labels:

1. Six heading styles

From H1 to H6, such as:

2. Font style

Italic character:<em> Web teaching network </em>

Bold character:<strong> Web teaching network </strong>

Italic + bold character:<strong><em> Web teaching network </em></strong>

3. Define Text

Define Large Fonts

<big> Web Teaching Network </big>

Define Small Fonts

<small> Web Teaching Network </small> or <small><small><small> Web teaching network </small></small>< /small>

If you set the Size= "..." in the font label, the <big> tag will not work.

In addition to the above commonly used font label elements, HTML also contains many other tags, but we do not use more.

Two. CSS (cascading style sheet) change font

The fonts on the previous page are immutable and stay there silently. When DHTML (Dynamic Web page) appears, we have more ways to control the font. In general, the implementation core of dynamic fonts is CSS (cascading style sheets) plus JavaScript. With both of these techniques, fonts can make a lot of difference.

1.CSS defines the label element of a font

Font-family: Sets the font word family.

<span style= "font-family: blackbody, Arial (GB)" > Web Teaching Network </span>

Font-sytle: Sets the font type.

<span style= "Font-style:normal" > Web Teaching Network </span>

Font-weight: Sets the character weight of the font.

<span style= "Font-weight:bold" > Web Teaching Network </span>

Font-size: Sets the font size.

<span style= "font-size:14pt" > Web Teaching Network </span>

Font-decoration: Modifies text fonts, such as underlined "underline".

<span style= "Text-decoration:underline" > Web Teaching Network </span>

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

<span style= "Font:normal bold 14pt blackbody" > Web Teaching Network </span>

The order defined in style is: font-style,font-weight,font-size,font-family.

2.CSS defines the conflict between font and <font> definition fonts

For CSS definition font and <font> definition font, we should pay attention to the following problems, such as the following font settings:

<span style= "font-family: Song Body (KSC); Font-size:200pt "><font> Web Teaching Network </font></span>

The font size will be set by the FONT-SIZE:200PT definition. But if you add the size attribute to <font>, for example:

<span style= "font-family: Song Body (KSC); Font-size:200pt "><font size=" 5 "> Web Teaching Network </font></span>

At this point, the size of the font is set to the type, FONT-SIZE:200PT will not work. The same is true for other properties. If you don't need dynamic fonts, you use HTML4.0 <font> to define fonts, and when you need dynamic fonts, you need to use CSS and JAVASCRITP to define fonts and raise events.

3. Define CSS Font attribute class

In general, when we make dynamic fonts, we will first use CSS to define the entire properties of the page font, and then reference in the page, instead of each paragraph of text to set, this is the implementation of dynamic font first step.

<HTML>
<style type= "Text/css" >
. tt2 {font-family: "boldface"; font-size:16px font-style:normal; line-height:17px}
</style>
<body>
<p class= "TT2" > Web Teaching Network </p>
</body>
</HTML>

In the above code, the two-word "web teaching network" refers to the font style defined by the. Main_2 class. Of course you can define different font styles in <style></style> so that the pages are referenced according to different fonts. Like what:

<HTML>
<style type= "Text/css" >
. tt1 {font-family: "XXFarEastFont-Arial"; font-size:15px font-style:normal;}
. tt2 {font-family: "boldface"; font-size:16px Font-style:normal;}
</style>
<body>
<p class= "TT1" > Web Teaching Network </p>
<p class= "TT2" > Web Teaching Network </p>
</body>
</HTML>

Three. Let the font move

To make the fonts move, we can take advantage of the events of our CSS or let JavaScript raise events.

1.CSS Raising Events

Example One

<HTML>
<style type= "Text/css" >
<!--
a:link {color:black; Text-decoration:none}
a:visited {color:white; Text-decoration:none}
a:hover {color:blue; Text-decoration:underline}
-->
</style>
<body>
<p><a href= "http://www.webjx.com/" > Web Teaching Network </a></p>
</body>
</HTML>

Link defines the color (black) of the links displayed on the page and the links are not underlined, visited defines the color (white) After the link is clicked, and hover defines the dynamic color when pointing to the link. The above example indicates that when you point to the link "Web instructional network", the font color changes from black to blue and underlined, and when you click the link, the link color turns white.

Case II

<HTML>
<title></title>
<body>
<p > Web Teaching Network </p>
</body>
</HTML>

The above example is the use of inline to change the font style, when the mouse pointer to "Web teaching network" when the font because the definition of this.style.fontsize=200, the two words to enlarge to 200pt, when the mouse moved "Web teaching network", because the definition of this.style.fontSize =100, these two fonts are reduced to 100pt.

2.JavaScript Raising Events

<HTML>
<style>
h1.italic {Font-style:italic}
h1.bold {font-style:bold;}
</style>
<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" > Web Teaching Network </body>
</HTML>

In the above example, we first defined two CSS classes H1.italic and H1.bold, then used JavaScript script to define function Changehead (), and finally raised the event to perform the defined function where needed. Here we have two click events onmouseover and onmouseout. Here I want to say a little bit, because you define the H1 two classes H1.italic and H1.bold, so when you are referencing, first set class= "bold" to indicate that the font appears in bold style. Then, move the mouse to "Web teaching network", triggered the event one, remove "web teaching network", triggered the event two.

For dynamic fonts, there are many ways to refine it. Just when you think about taking advantage of dynamic fonts, you need to understand that different browsers can produce dissimilar results. Then, you need to keep testing, to find a way to both worlds. Finally, I hope that after reading this article, look for some CSS and JavaScript data, because they are the realization of all the "dream" tool.