CSS knowledge point font size attribute Font-size

Managing the size of text is important in the field of web design. However, you should not make the paragraph look like a caption by resizing the text, or make the title look like a paragraph. Always use the correct HTML headings, such as use

The Font-size value can be an absolute or relative value.

Absolute:

Sets the text to the specified size

Do not allow users to change the size of text in all browsers (not for usability)

Absolute size is useful when determining the physical size of the output

Relative size:

To set the size relative to the surrounding elements

Allow users to change text size in the browser

Note: If you do not specify a font size, the default size for normal text (such as paragraphs) is 16 pixels (16px=1em).

Use the image to set the font size

By setting the text size in pixels, you can have full control over the text size:

In Firefox, Chrome, and Safari, you can readjust the text size of the above example, but not in Internet Explorer. Although the size of the text can be resized through the browser's zoom tool, this is actually an adjustment to the entire page, not just text.

Use EM to set font size

Many developers use EM units instead of pixels to avoid problems with text that cannot be adjusted in Internet Explorer. It is recommended to use EM size units. 1em equals the current font size. If the font-size of an element is 16 pixels, then for that element, 1em is equal to 16 pixels. When you set the font size, the value of EM changes relative to the font size of the parent element.

The default text size in the browser is 16 pixels. So the default size of 1em is 16 pixels. You can use this formula to convert pixels to em:pixels/16=em(Note: 16 equals the default font size of the parent element, assuming the parent element's font-size is 20px, the formula should be changed to:pixels /20=em)

CSS knowledge point font size attribute Font-size