CSS font text attributes

 The function of CSS font text properties is to control the size, thickness, style, font and other effects of webpage text. The CSS properties that control the appearance of these types of text are font-size , font-weight , font-style, and font-family. These properties are the current standard CSS font text properties and have been supported by most mainstream browsers. They can almost completely replace the traditional HTML font tag design method. Below we will use these CSS fonts to design text appearance Each attribute is briefly introduced.

CSS font text attribute table

Attributes	Description
font-size	Set the text size, and the attribute value is presented in "number + unit". The larger the number, the larger the font.
font-weight	Set the text thickness, the attribute value is set to bold to be bold, instead of traditional HTML <b> tag or <strong> tag.
font-style	Set the text style. There are two italic attribute values ​​available, namely italic and oblique, to replace the traditional HTML <i> tag.
font-family	Set the text font, you can set multiple different fonts to be arranged in order to replace the traditional HTML face tag.

The following applies these common CSS font text attributes in the table to the examples to actually show their functions.

CSS font text property example 1. Set text size, use font-size property

<span style="font-size:12px;">This is the text size of 12px</span>
<span style="font-size:16px;">This is the text size of 16px</span>
<span style= "font-size:20px;">This is 20px text size</span>

Effect of the example

This is the text size of 12px This is the text size of 16px This is the text size of 20px

Example 1 shows that the font-size property in the CSS font text property can be used to adjust the text size of the webpage. The property value of font-size mentioned in the above table can be represented by "number + unit". The larger the number, the larger the font. From the presentation effect of the example, we can see that the 20px font is far larger than the 12px font. We can create three different sizes of text with only three numbers. There are more ways to set font-size, such as using different Please refer to the detailed introduction of " CSS font-size ".

CSS font text property example 2: Set text bold, use font-weight property

<span style="font-weight:normal;">This is normal weight text</span>
<span style="font-weight:bold;">This is bold text</span>

Effect of the example

This is the text of normal weight, this is the text of bold

CSS font-weight is a standard webpage text bold font design attribute. The effect is the same as traditional HTML <b>, <strong> tags. In the example, "font-weight: normal;" means to make the text appear normal weight. And "font-weight:bold;" is to make the text appear bold. We have introduced it in " CSS font-weight Setting Font Weight ".

Example of CSS font text property three, set text style

<span style="font-style:normal;">This is normal font</span>
<span style="font-style:italic;">This is italic</span>
<span style="font- style:oblique;">This is italics</span>

Effect of the example

This is regular font This is italic This is italic

Traditional HTML usually uses the <i> tag when designing text italics. The alternative syntax in the CSS font text property is the font-style property. From the example, you can see that the CSS font-style property is italic and oblique. All kinds of attribute values ​​can create the effect of italics. For detailed research, please see the content of " CSS font-style Attributes ".

Example of CSS font text property four, set text font

<span style="font-family:新小明体;">This is the new detailed
style </span> <span style="font-family:标楷体;">This is the standard regular style</span>
<span style="font-family:Microsoft's regular boldface;">This is Microsoft's regular boldface</span>

Effect of the example

This is the new detailed font , this is the standard regular font, this is the Microsoft regular font

Web designers can use CSS 's font-family text very easy to apply distinctive fonts, effects similar to the traditional HTML of the face attribute, but CSS 's font-family and more powerful, allowing web designers to set a number of different Fonts to reduce the occurrence of invalid fonts. Example 4 is just a few texts commonly found in Windows operating systems, and there are more beautiful webpage text fonts that can be applied through the font-family property. Please see the full content introduction in the " CSS font-family font " chapter.