The CSS Fonts property is used to define font family, size, thickness, and text style (such as italics).

HTTP:

The CSS uses the font-family property to define the font family of text

p { font-family:Microsoft Yahei; }
div { font-family:Arial,"Microsoft Yahei".Microsoft Yahei; }
Copy the code
  • Fonts must be separated by commas in The English state
  • In general, if there is a font consisting of multiple words separated by Spaces, use quotation marks
  • Use the default font to ensure that it can be correctly displayed in any user’s browser
  • Font-family :’Microsoft Yahei’, Tahoma, Arial,’Hiragino Sans GB’; }

If you have three fonts, you can’t find the first one and you can’t find the second one and you can’t find the third one

The font size

The CSS uses the font-size property to define the font size

p {
	font-size: 20px;
}
Copy the code
  • The px(pixel) size is the most common unit for our web pages
  • The default text size for Chrome is 16px;
  • Different browsers may display different font sizes by default, so try to give an explicit value, not the default size
  • You can specify the size of the entire page text for the body

The title tag is special and requires a separate text size

The font size

The CSS uses the gont-weight property to set the size of the text font

p {
	font-weight:bold;
}
Copy the code

The font – weight: normal | bold | bolder | lighter |

Attribute values Describe the value
Normal: Normal font. Equivalent to a numeric value of 400
bold Bold. Equivalent to a numeric value of 700.
bolder Define a value that is heavier than an inherited value
lighter Define values that are lighter than inherited values
integer Use numbers to indicate text font size. Scope: 100200300400500600700800900
  • Learn to keep bold tags (such as H and strong, etc.) unbold, and other tags bold
  • In actual development, we prefer to use numbers for thickness

Writing style

The CSS uses the font-style property to set the text style

p {
	font-style:normal;
}
Copy the code
Attribute values explain
normal Specifies the text font style as a normal font
italic Specifies that the text font style is italic. For special fonts that are not designed in italics, oblique is applied if you want to use the italic appearance
oblique Specifies a slanted font for the text font style. Slanting the text artificially, rather than selecting italics from the font

Note: we rarely italicize text. Instead, change the italic label (em, I) to a non-slanted font

Font compound properties

The font property can be written as a combination of the above text styles, which can save more code

body {
	font: font-style font-weight font-size/line-height font-family; 
}

p {
           font:italic 800 5px "宋体";
}
Copy the code
  • When the font attribute is used, the characters must be written in the sequence specified in the preceding syntax. The characters must be separated by Spaces
  • Properties that do not need to be set can be omitted (take the default values), but the font-size and font-family attributes must be retained, otherwise the font attribute will not work