Shulou(Shulou.com)06/01 Report--

This article mainly talks about "what are the font units of CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the font units of CSS"?

For drawing and printing, the "unit" is very important, but in web typesetting, the unit is also important. Since the popularity of CSS3, it has supported some convenient units (px, em, rem). This article will sort out these commonly used CSS units and help you to be more comfortable with them in the future.

Units of "web pages" and "printing"

If you want to divide the unit, it can be divided into two categories: "web page" and "printing". Usually, for CSS, it will only be applied to the style of the web page. after all, if you really want to do printing, you will tend to design it through typesetting software.

Web pages (units)

Px: absolute unit that represents each "pixel" on the screen.

Em: relative unit in which each child element multiplies the PX value of the parent element by multiplying it.

Rem: relative unit in which each element multiplies the PX value of the root element by multiplying it.

%: relative units, each child element multiplies the PX value of the parent element by the percentage.

Web page (property name)

Medium: default value, equal to 16px (h5 default value)

0.6x xx-small:medium (H7 default)

0.75 times of x-small:medium

0.8 times of small:medium (h6 preset value, defined by W3C as 0.89, measured as about 0.8)

1.1x of large:medium (h4 preset value, defined by W3C as 1.2and measured as about 1.1x)

1.5x x-large:medium (h3 default)

2 times xx-large:medium (H2 default)

Smaller: about 80% of the parent layer

Larger: about 120% of the parent layer

Printing

Pt: each "point" of the printer, defined as 1 pt=1/72 in, if 1 px = 1 pt on a 72 dpi system, but 1 px = 0.75 pt on a 96dpi system.

In: inches, 1 in = 96 px on 96 dpi systems.

Cm: cm, 1 cm = 37.795275593333 px on 96 dpi system.

Mm: mm, 1 cm = 3.7795275593333 px on 96 dpi system.

Sample display

The following will show examples of four different units, for fairness, all four examples apply the preset div format, purely change the font-size to see the difference, because if the child element is not set font-size, it will automatically inherit the font-size of the parent element, and the font size should be initialized in advance. The following two paragraphs of CSS can preset the font size of all elements to 16px, and then you can adjust it individually.

Html {

Font-size:16px

}

Html * {

Font-size: 1rem

}

1. Px

Px is an absolute unit, so as long as you set the number of px, it will be accurately rendered, which is very useful for some typesetting that emphasizes precise location, as shown in the example, specify the size of the px font.

16px

20px

24px

16px

32px

2. Em

Em is a relative unit, multiplying the PX value of the parent element by the "multiple" for each child element. If we used 1.2em for each layer of div, the innermost layer would be 16px x 1.2 x 1.2 x 1.2 = 39.8px. (the default font size of the browser is 16px. If not specified, the font size of the parent element will be inherited directly.)

1.2em

1.2em

1.2em

1.2em

1.2em

3. Rem

Rem is a relative unit, multiplying the "multiple" of each element by the PX value of the root element. If we used 1.2rem for each layer of div, the innermost layer would be 16px x 1.2 = 19.2px. (the root element refers to the font-size of html, which is 16px by default)

1.2rem

1.2rem

1.2rem

1.2rem

1.2rem

4.%

% percentage is a relative unit, which is more or less the same as em. To put it simply, em is a percentage divided by 100. If we use 120% for each layer of div, it is equivalent to 1.2em, and the innermost layer will be 16px x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px.

120%

120%

120%

120%

120%

5.small, medium, large... Etc.

There are seven properties of font size, namely xx-small, x-small, small, medium, large, x-large and xx-large. In addition to x-small, the other six correspond to the label text size of h7--h2. According to the W3C specification, it is based on the medium preset 16px (if the html font preset size changes, medium will also change), using a fixed percentage multiplied by the medium size. For example, the ss-small preset is 16px x 0.6 = 9.6px (the browser displays as 12px).

Xx-small

X-small

Small

Medium

Large

X-large

Xx-large

6. Larger 、 smaller

Larger and smaller are fixed percentages, and 120% of the parent layer larger is 80% of the parent layer.

Medium

Larger

Larger

Larger

Smaller

Smaller

Smaller

At this point, I believe you have a deeper understanding of "what are the font units of CSS?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.