CSS font-family - CSS basics

 CSS font-family is a standard method used by CSS to specify the font of a webpage. At the same time, multiple groups of different fonts can be set. When the browser does not have the first font, the second font will be automatically displayed, and so on. The method of using font-family to set the font of the webpage has the advantage of quickly deploying the fonts in the entire webpage and presenting them with the overall design style. At the same time, setting multiple sets of different fonts to improve the cross-platform presentation style is consistent. A fairly common design technique used by web designers, all major browsers support the CSS font-family property.

CSS font-family basic syntax

font-family: the first font, the second font, and the third font;

Separate each font you want to set with a comma, and let the browser judge by itself. The font setting can give clear font values, such as MingLiU, DFKai-sb, Microsoft JhengHei, and general fonts such as serif, sans-serif, cursive, fantasy, monospace, etc. If you want to use a clear font name, it is recommended to use an English name instead of a Chinese name, which can avoid display failures caused by browser reading errors.

CSS font-family font example

Font	Grammar example	Present
serif	<span style="font-family:serif;">Show serif font</span>	Show serif font
sans-serif	<span style="font-family:sans-serif;">Show sans-serif font</span>	Show sans-serif font
cursive	<span style="font-family:cursive;">Show cursive font</span>	Show cursive font
fantasy	<span style="font-family:fantasy;">Show fantasy font</span>	Show fantasy font
monospace	<span style="font-family:monospace;">monospace font</span>	monospace font
Detailed body	<span style="font-family:MingLiU;">Detailed font style</span>	Detailed font
New details	<span style="font-family:PMingLiU;">New detailed font style</span>	New detailed font
Standard italics	<span style="font-family:DFKai-sb;">Standard regular font</span>	Standard italics font
Microsoft is bold	<span style="font-family:Microsoft JhengHei;">Microsoft JhengHei;</span>	Microsoft is bold

It should be noted that the font setting of CSS font-family does not automatically download the font file. If the font you set is not available on the client side, the effect you want may not be displayed correctly, so it is recommended to clear the font. , It’s best to add a common font to ensure the presentation of the page.

Common common fonts in CSS are serif, sans-serif, cursive, fantasy, monospace.

CSS font-famiy example, set paragraph font

p {
　font-family:serif,sans-serif,cursive,fantasy,monospace;
}

Sometimes designers will need to design different styles of fonts for different paragraphs of web articles. At this time, using font-family is a very efficient way. The same technique can also be used in DIV blocks or The text in the span area gives different effects to different areas of the entire webpage.