How to set a page font with CSS

css| Web page in the design process of the Web interface, many people think about what graphics and colors to decorate the Web page, or add any animation effects on the page, but the font of the page is not too much attention. The results tend to be that some websites are not too small or too big to affect the reading, while some websites use standard fonts for a whole page, with no personality. In fact, the font as a website content carrier, has its unique importance, should not be overlooked.

Using HTML, we can make simple changes to the font size and shape, but we have to use CSS to control and create special effects. It allows you to more effectively control the appearance of the Web page and expands the ability to specify exactly where the page elements are positioned, look, and create special effects. Considering the use of FrontPage to make Web pages more people, at the same time it to other Web editor users also have a certain reference role,

So, I'll explain how to use CSS to set the font of a Web page in frontpage2000.

We can use CSS to set up countless kinds of web fonts, but same, any changes should follow the basic CSS syntax. So let's take a look at the basic syntax of CSS: HTML flag {flag attribute: attribute value; Flag attribute: property value; Flag attribute: property value; When you set a font, you can achieve the goal by changing the property value of the Font property correctly. Font properties are divided into five types: Character family (font-family), font style (Font-style), font morphing (font-variant), Font Bold (font-weight), font size (font-size), and the Font property is a general property , you can one by one specify the above various properties and property values. Their function and attribute values are as follows:

1, the Word clan (font-family)
Function: You can set a list of available fonts by specifying the font type to change the font of an HTML flag or element by font-family. Browsers select fonts from front to back.

The syntax is: h1 {font-family: Font type, font type, font type}

2. Font style (Font-style)
Function: Make text appear as flat italic or italic, etc. property value: normal-Normal, italic-Italic, oblique-oblique body

Syntax is: H1{font-style: Property Value}

3, Font deformation (font-variant)
function: Make lowercase letters in text appear as uppercase letters with smaller fonts, often used to design special headings.

Property values: Normal (normal) and small-caps (small capital letters)

Syntax is: H1{font-variant: Property Value}

4, Font bold (Font-weight)
Function: Used to set the weight of a font stroke.

Property value: Normal

Relative degree-bold, bolder, light, lighter

Gradients-100, 200, 300, 400 (equivalent to normal), 500, 600, 700 (equivalent to bold, lighter, bolder, and value 100-900).

Syntax is: H1 < font-weight: Property value >

5. Font size (font-size)
Function: Change the font size.

Property value: Length-in millimeters (mm), cm (cm), inches (in), Points (PT), pixels (px), Pica (PC), ex (height of lowercase letter x), or em (font height) as units of measure.

Percent-the percentage of the font size relative to its parent element. The absolute dimensions are divided into Xx-small, x-small, small, medium, large, X-large, Xx-large Seven, which are scaled in proportion to the medium dimensions of various fonts, 1.5 times times each level. Relative size: There are two kinds of larger and smaller, depending on the size of the original font to determine the size after scaling. Percent: Set the font to the percentage value of the original size, you can specify any number.

Syntax is: {font-size: Property value}

6, fonts (font)
Features: Shorthand properties that provide a quick way to set all properties of a font.

Property value: The Font property value is the previously listed value, and the order of the contents is: Font-style; Font-variant; Font-weight; Font-size; Line-height; Font-family. You can omit some properties and separate the property values by a space.

Syntax: {font: Property value 1 Property value 2 ... Property value N}

I would like to give you an example: the "network" of the three words set to bold font first in the page into the "network" of these three words, because the weight of the font is determined by the "font bold" attribute, after you find the words in HTML edit mode, add the font bold before and after them. Code for its property value, such as: <span style= "font-weight:700" > Networked </span>

　　
After completing the above steps, the three words "networked" are changed from plain font to bold font. If you want to change to another font, just replace the font properties and the property values in the code.

I mentioned above that the Font property is a general property and that you can quickly set all the properties of the font. Here's an example of how to define multiple attributes for a text. I still use the three word "networked" as the setting object, but this time it changes to a 16-pound skew font. The steps you set are similar to the above, but the code is changed to: <span style= "Font:oblique 16pt" > Networked </span>

　　
When you're done, these three words have two properties at the same time. Compare the following two diagrams to see the difference between the changes.

　　

It is also necessary to note that although frontpage2000 can also change the font size and glyph, it cannot control the font as precisely as CSS, such as frontpage2000 cannot set the font size to 16 points. If you copy the above code directly into the HTML edit page, you will make the <> "" symbols into strange characters, so in the application or directly typed as well.

The above is how to set the font of some text in the page, but if you want to set the font of the whole or several pages to apply the following methods:

First, when you just want to define the style of the current page, you can use an embedded style sheet. An embedded style sheet is a cascading style sheet, embedded within the <HEAD> tag of a Web page. Styles in an embedded style sheet can only be used on the same page.

Use an external style sheet when you want to apply the same style consistently across all or part of a Web page on a site. Defining styles in one or more external style sheets and linking them to all pages ensures consistency in the appearance of all pages. If you decide to change the style, you only need to make one change in the external style sheet, the change is reflected on all the pages that are linked to the style sheet. Typically, an external style sheet is a. css file extension, such as 1.css.

Here is how to put all the text of the Web page as a popular 9-pound word for example, to explain how to use the above two methods.

If you are setting up the current page, use the embedded style sheet, just go to the HTML editing page and add the following code to

<style type= "Text/css" >

Body {font-size:9pt}

TH {font-size:9pt}

TD {font-size:9pt}

</style>

　　
The effect can be seen when finished.

If you want to make some Web pages apply the same settings, use an external style sheet. First create a new style sheet in FrontPage by clicking on the file--new--the page, clicking the style sheet in the pop-up window, and selecting the Normal style sheet. Then, type the following code:

Body {font-size:9pt}

TH {font-size:9pt}

TD {font-size:9pt}

　　
Note: If you copy directly, you will generate extra code.

Save this file in the site directory. When you edit a Web page, click the format-style sheet link, and select the above file in the pop-up window.

The above is just a few simple CSS application, as long as you can in-depth understanding of CSS, and skilled use it, you will be able to create a more perfect Web page.