How to set the font to 'Microsoft Yahei' in css

In web design, the selection and setting of fonts are very important, and can directly affect the readability and aesthetics of the web page. The Microsoft Yahei font of Microsoft Corporation is highly praised and selected by the majority of designers and front-end engineers. This article will introduce in detail how to use Microsoft Yahei fonts in CSS, and explain the related concepts and usage techniques of fonts.

1. Font concept

In CSS, fonts are divided into three categories: types based on font type, types based on font weight (thickness), and types based on font style. The following is the specific classification and introduction.

1. By font type

1) Serif font: with decorative lines, such as Song Dynasty, Times New Roman, etc.

2) Sans-serif font: no decorative lines, such as Microsoft Yahei, Arial, etc.

3) Monospace font: Each character occupies the same width, such as Courier New, Consolas, etc.

2. By font weight type

1) Normal font weight: Normal font weight.

2) Bold font weight: Bold font weight.

3) Bolder font weight: extremely bold font weight.

4) Lighter font weight: lighter than regular font weight.

3. By font style

1) Normal font: Normal font style.

2) Oblique font: The text is slanted, similar to italics.

3) Italic font: The text is upright, but a little slanted, and the text style is slanted.

2. CSS font setting method

In CSS, you can set the font type, font weight and font style through the font attribute. The following is the specific setting method:

1. Set font type

The font type can be set through the font-family attribute. Multiple font types can be separated by English commas. Font types are applied to elements in order of priority from left to right. For example, the following code will apply Microsoft Yahei font and SimSun font:

font-family: "微软雅黑", SimSun, serif;

2. Set the font weight

The font weight can be set through the font-weight attribute, and the attribute value can be Is normal (regular font weight), bold (bold), bolder (bolder), lighter (lighter) or number (weight value from 100 to 900). For example, the following code will set the text to bolder:

font-weight: bolder;

2. Set font style

The font style can be set through the font-style attribute, and the attribute value can be normal (regular style), italic (italic), oblique (oblique), where italic is italic and oblique is oblique. For example, the following code sets the text to italic style:

font-style: italic;

3. Precautions for using Microsoft Yahei font

1. Confirm whether the operating system supports Microsoft Yahei font. If the browser The computer operating system does not support Microsoft Yahei font, so no matter how many times it is set, it will not take effect and the user will see the backup font.
2. When using Chinese font-family, you need to use double quotes, otherwise errors may occur.
3. When using Microsoft Yahei font, if you set the font color and background color to be too dark or too light, it may cause the font to be difficult to recognize under a certain background, so you need to pay attention.
4. Microsoft Yahei font is not widely used in technical fields such as mathematics and computer technology. Therefore, it cannot replace other fonts in some demand fields and needs to be used according to specific situations.

In short, the fonts in CSS are so simple and easy to learn. If you want to make the web interface more beautiful, the selection and setting of fonts is very important. Mastering the concepts and techniques related to fonts can make your web pages more outstanding. If you want to use the Microsoft Yahei font, simply set the font-family property in the CSS file to "Microsoft Yahei". You also need to pay attention to the use of double quotes, whether the operating system supports it, and the appropriate color and style. Wait for details to achieve better results.

The above is the detailed content of How to set the font to 'Microsoft Yahei' in css. For more information, please follow other related articles on the PHP Chinese website!