tutorial on the use of font-size properties in CSS

Basic grammatical structure:

font-size+ Font Size value + unit

Word: font-size

Syntax: font-size:absolute-size | Relative-size | Length

Value: Xx-small | X-small | Small | Medium | Large | X-large | Xx-large

Xx-small: Min

X-small: Smaller

Small: Small

Medium: Normal (default), adjusting according to font

Large: Big

X-large: Larger

Xx-large: Max

The specific length unit value is also desirable

Available units

There are several different ways to declare a font size in a CSS. In general, these units are divided into two categories--relative and absolute. Absolute units (mostly) are fixed and involve some physical measurements. Once they are declared, they will not be able to change their size by changing the font size of other elements.

The relative units do not have an objective measurement. Instead, their actual size is determined by the size of the parent element. This means that their size can be changed by changing the size of the relevant elements.

The following is a brief description of the units-

Here you can see a detailed list of units, but I will focus on what I think is most commonly used in units--px, PT,%, EM, REM, and VW.

What's the difference between them?

The differences between these units may be difficult to understand by concept, so the best way is to show their differences through examples.

Example 1--default settings

In a blank HTML document, you do not have any statement about the size of the font and use only the default settings. The default font size for HTML and body labels is 100% on most browsers. This equates to the following formula--

CSS code copy content to clipboard

100% = 1em = 1rem = 16px = 12pt

This means that if you are a

The label sets the font size to 100%, and the other

To 16px, they will be rendered on the screen at the same size. You can see this proof here--

Example 2--Absolute Unit vs relative Unit

The difference between absolute and relative units can be highlighted by changing the font size of the HTML. If we set html{font-size:200%}, this will only affect

The size of the font set in relative units.

This is an important advantage in using relative units. With the ability to scale fonts so easily, you can create a truly responsive web site by simply changing the size of the HTML font. Here's a good example.

Example 3--rem VS EM (and%)

The EM (and%) units display the current font size by calculating the font size of the parent element. For example--

CSS code copy content to clipboard

HTML {

font-size:100%/* =16PX *

}

Body {

Font-size:2em; * =32PX * *

}

p {

Font-size:1em; * =32PX * *

/* FONT-SIZE:0.5EM; =16PX *

}

Because P inherits body,body inherit HTML, we can calculate that the paragraph font size set by EM and% changes to twice times the default size.

When you use the EM unit for an element, you must take into account the font size of all the parent elements. As you can see, it's easy (to compute the size of the font) to become complex and messy.

The solution to this problem is rem. REM is based on the font size of the HTML element rather than the parent element. For example--

CSS code copy content to clipboard

HTML {

font-size:100%/* =16PX *

}

Body {

Font-size:2rem; * =32PX * *

}

p {

Font-size:1rem; * =16PX * *

}

Using REM allows you to have the ability to scale em and% without having to deal with nesting issues.

Example 4--viewport width size

VW is a new CSS3 added unit that uses the viewport width to calculate the font size. This allows for more response font sizes.

Although this seems to be a very useful unit for responsive design, I'm not a fan of it personally. Because it does not give me more control over the size of the font, he always shows too much or too little.

My way.

Before I did this research, I used to set my font size as always. This is because most browsers now allow users to zoom in on their own pages when the font is too small, so there is nothing wrong with using pixels.

However, I find that this approach largely limits the ability to scale. Although my font looks good on small and medium screens, he should have better optimizations on the big screen. Even if the user has an enlarged option, this should not be what we want them to do.

So the solution I use for REM settings is (using pixels as a standby).

CSS code copy content to clipboard

HTML {

font-size:62.5%; /* Sets the base font to 10px for easier math * *

}

Body {

font-size:16px;

Font-size:1.6rem;

/* Sets the default sizing to make sure what is actually 10px * *

}

H1 {

font-size:32px;

Font-size:3.2rem;

}

So I enlarged the font size and only needed to write it--

CSS code copy content to clipboard

@media screen and (min-width:1280px) {

HTML {

font-size:100%;

}

}

This method is used in pixels as a demotion unit because IE8 and below do not support REM. One problem with this is that when I change the underlying font size, I can only apply it to the size of the extensibility and not the backing font size. But I don't think it's a huge problem because it's just an additional problem for the core of a larger device.

If you have any thoughts on how to improve the problem, please let me know in the comments. I can also write a scss mix so I don't have to enter these two reserve and REM units.