CSS _ font

The so-called Font: it refers to the shape structure of the text. It is divided into different categories according to the appearance Font: Serif, sans-serif, and monospace. The font family of each category can be divided into different font families, and the font family can contain different font faces. The font attribute of CSS describes the size and appearance of a class of fonts. For example, the font family above, the font size, bold or italic.

In general, the fonts on Web pages have three sources:

① Fonts installed on the user's machine

② Maintain the font in a third-party website, such as Typekit and Google

③ Keep the font on your Web server

 

Font-family

It is used to set the font used for text. Generally, the entire page should have a primary font family. Because the font in the Web page is either from the user's local computer or from the server, therefore, there may be a problem where a specified font cannot be used. To solve this problem, you must set multiple candidate fonts to form a font stack when setting the font. And always declare a general font at the end. For example:

Body {font-family: "trebuchet ms", tahoma, sans-serif ;}

What general fonts are available?

Serif, sans-serif, monospace, cursive, and fantasy are all generic fonts. These fonts confirm that the document is correctly displayed in the worst case.

Font-size

The first thing to understand is that the default style set for all elements in the style sheet of the browser is the relative unit em, And the font-size is 1em, that is, 16px.

Two units are used to indicate the font size: absolute unit and relative unit.

Absolute unit: pixel px, pica, and inches

It is easy to set the font size with an absolute unit. The font size is not affected by the ancestor element. The disadvantage is to adjust the font size of the entire page. You need to manually modify the font size one by one.

Relative Unit: %, em, rem

The relative font size is determined by the ancestor element relative to the font size recently set.

The relative font size can be used to automatically adjust the size of each layer. This is very important for creating responsive pages.

 

Font-style

It is used to set whether the font is italic or positive, that is to say, font-style is only used to set italic to italic or normal to positive.

Font-weight

Used to set the font width. In fact, the browser only displays the bold and normal values.

Font-variant

Font-variant has only one value, that is, small-caps, which converts all lowercase letters into corresponding uppercase letters.

 

Simplified font rules:

You must declare the font-size and font-family

Other values are listed in the following order:

1. font-weight, font-style, and font-variant are sequential

2. font-size

3. font-family