Fonts and text

Font

There are three sources of fonts in the Web page.

1. The fonts installed in the user's machine. (Until recently, these fonts are the only batch of fonts that can be safely used in Web pages.) ）

2. Fonts stored on third-party websites. The most common are Typekit and Google, which can be linked to your page using the link tag.

3. Save the fonts on your WEB server. These fonts can be sent to the browser with a Web page using the @font-face rule.

The following are the 6 properties related to font styles.

? Font-family

? Font-size

? Font-style

? Font-weight

? Font-variant

? Font (shorthand property)

Font family font-family

What are the common font classes? There are several types of the following:

? Serif, which is the liner font, will have some decorative lines at the end of each character stroke;

? Sans-serif, that is, sans serif font, the end of the character strokes are not decorative lines;

? Monospace, that is, equal width font, as the name implies, is the width of each character (also known as the Code body);

? cursive, i.e. cursive or handwriting

Font size font-size

Font-size can be inherited. In other words, changing the font size of an element may cause its child element font size to vary proportionally. For example, if you set the font-size of the BODY element to 200%, the text of all the elements in the page will increase by one more times.

1. Absolute font size px

2. Relative Font size EM

3. About REM Units

This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM.

Font style Font-style

Values: italic, oblique, normal.

Font weight font-weight

Possible values: 100, 200 ... 900, or lighter, normal, bold, and bolder.

Font Change font-variant

Value: Small-caps, normal.

Shorthand font Properties

Rule one: You must declare the values of Font-size and font-family.

Rule two: All values must be declared in the following order.

1. Font-weight, Font-style and font-variant are not in the order of succession;

2. Then the font-size;

3. Finally, the font-family.

Text properties

Here are a few of the most useful CSS text properties:

? Text-indent

? Letter-spacing

? Word-spacing

? Text-decoration

? Text-align

? Line-height

? Text-transform

? Vertical-align

Text Indent text-indent

Value: The length value (both positive and negative).

Text Decoration text-decoration

Values: Underline, overline, Line-through, Blink, none.

Text Conversion Text-transform

Values: None, uppercase, lowercase, capitalize.

Vertical alignment Vertical-align

Values: Any length value and sub, super, top, middle, bottom, and so on.

Web Font Big Secret

Currently, CSS features that embed downloadable fonts in Web pages using @font-face rules have been widely supported by browsers.

@font-face Rules provide designers with a wide range of options beyond the system's own fonts. In other words, the browser can download fonts from the WEB server, which means no more reliance on the fonts in the user's machine, but also ensures that the user can see the fonts set in the CSS.

There are three ways to set Web fonts.

1. Use public font libraries such as Google Web Fonts or Adobe's Typekit.

2, the use of pre-@font-face pack.

3. Use font Squirrel to generate @font-face package in your own font.

Fonts and text