How to set text size in css

In web design, text size is one of the very important elements. You can improve the readability of your web pages by adjusting the text size, making the content easier to read. In HTML, text size can be set using CSS (Cascading Style Sheets). Here are some common CSS text size settings.

1. Use absolute units

Absolute units in CSS include pixels (px), points (pt), inches (in), centimeters (cm), etc. You can use these units to specify specific pixel values ​​or actual dimensions when setting text size.

For example, you can use the following code to set the paragraph text size to 16 pixels:

p {
font-size: 16px;
}

This way , all paragraphs will be displayed at 16 pixels.

If you want to set the text size to the actual size, you can use inches, centimeters, etc. For example, the following code sets the paragraph text size to 2 inches:

p {
font-size: 2in;
}

Note here that the actual size unit setting is used Text size is affected by screen resolution and device size. Therefore, text size may vary on different devices.

2. Use relative units

In addition to absolute units, CSS also supports relative units. The size of relative units is relative to the size of the parent element. Common relative units include em, rem, %, etc.

1. em

em is a relative unit for setting the text size relative to the font size of the current element. For example, the following code sets the paragraph font size to 1.5 times the parent element's font size:

p {

font-size: 1.5em;

}

If the parent element's font size is 16 pixels , the font size of the paragraph will be 24 pixels (16*1.5).

2. #rem

rem is a relative unit for setting the text size relative to the font size of the root element (i.e. the html element). For example:

html {
font-size: 16px;
}

Based on this, the following code sets the paragraph font size to 1.5 times the font size of the root element ：

p {
font-size: 1.5rem;
}

If the font-size of the root element is 16 pixels, the font-size of the paragraph will be 24 pixels (16 *1.5).

Compared with em, rem is more convenient because it is not affected by the font size of the parent element, but is calculated relative to the root element of the entire page.

3. %

% is also a relative unit for setting the text size relative to the size of the parent element. For example, the following code sets the paragraph font size to 150% of the parent element's font size:

p {
font-size: 150%;
}

If the parent element The font size is 16 pixels, then the font size of the paragraph will be 24 pixels (16*1.5).

3. Use keywords

In addition to specific size units, CSS also supports some keywords to set text size. Commonly used keywords include small, medium, and large.

For example, the following code sets the paragraph text size to medium:

p {
font-size: medium;
}

In this way, the paragraph's Text size will be resized according to the browser's default settings.

4. Summary

In web design, text size is one of the very important elements. CSS can be used to set text in different sizes according to design requirements. You can set it using pixels, actual size, em, rem, %, keywords, etc., and choose according to the specific situation.

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