Chapter 4 CSS text style [Top]-original of water

Chapter 4 CSS text style [Top]-original learning points of water:

1. Font Summary

2. Font settings

3. Web font

Lecturer: Li Yanhui

This chapter mainly discusses CSS text styles in HTML5. By setting text styles, we can change the font size, style, and text orientation.

I. Font Summary

In this lesson, we will focus on setting fonts in CSS text styles. The style sheet is as follows:

Attribute name	Description	CSS version
Font-size	Set the font size	1
Font-variant	Set whether to convert the English font to small uppercase letters	1
Font-style	Set whether the font is skewed.	1
Font-weight	Specifies whether the font is bold.	1
Font-family	Set font	1
Font	Set Font style compound writing	1 ~ 2
@ Font-face	Set Web font	3

Ii. Font settings

We can use CSS text styles to modify the font size, style, and form.

1. font-size

p {    font-size: 50px;}

Description: Set the text size. Attribute values:

// Set the font size of the parent element first

body {    font-size: 50px;}

// Set a smaller value.

p {    font-size: smaller;}

2. font-variant

p {    font-variant: small-caps;}

Explanation: Set whether the font is displayed with small uppercase letters.

Value	Description
Normal	It indicates that the lowercase state is restored if it is in small upper case.
Small-caps	Display lowercase letters with small uppercase letters.

// Set small upper case for the parent Element

body {    font-variant: small-caps;}

// Reset the sub-element settings to lowercase.

p {    font-size: 50px;    font-variant: normal;}

3. font-style

p {    font-style: italic;}

Explanation: Set whether the font is skewed.

Value	Description
Normal	Indicates that the tilt state is restored to normal.
Italic	Italics are used.
Oblique	To make the text skewed. The difference is used when there is no italic.

p {    font-weight: bold;}

Explanation: Set whether the font is bold.

Value	Description
Normal	Indicates that the bold font is restored to normal.
Bold	Bold
Bolder	Bold font
Lighter	Lightweight font
100 ~ Number between 900	600 and later are bold, not bold before

Currently, only bold is bold in the display of computers and browsers, and the others are more coarse and finer, which cannot be reflected at present.

5. font-family

P {font-family: ;}

Explanation: Use the specified font name. The font used here is the font of the browser system. Sometimes you can make several backup fonts to be compatible with the fonts of many browser systems.

// Backup font

P {font-family:,, ;}

6. font

P {font: 50px pixel body ;}

Explanation: the combination of simplified font settings. The format is as follows: [whether to tilt | whether to bold | whether to convert to small uppercase] font size font name;

III.WebFont

Although the problem of missing user fonts can be solved through alternative fonts, the user experience is poor after all, and not necessarily all users have installed alternative fonts. Therefore, CSS now provides Web Fonts, that is, server fonts.

// The server provides Fonts

@font-face {    font-family: abc;    src: url('BrushScriptStd.otf');}p {    font-size: 50px;    font-family: abc;}

English font files are relatively small, while Chinese files are very large. Therefore, if you want to use Chinese Characters in special fonts, you can use images. It is not recommended to use special Chinese fonts in a large area.