CSS font-size

 Setting text size is a frequently used technique in CSS. Few people do not set the size of webpage text at all. To set text size in CSS, font-size syntax can be used, and there are many values ​​that can be given, such as numbers + units. , Numbers +%, English letters, etc., among various units, px is the most commonly used, because the number range of px can be designed for delicate text size differences. Generally, web content text is about 12px ~ 16px, and the size of title text is about Around 18px~22px, designers can adjust the number size according to their own page style. The larger the number, the larger the font. The following is a comparison table of common font-size units.

CSS font-size text size comparison table

Attribute value	grammar	Rendering effect
px	<span style="font-size:13px;">13px</span><br> <span style="font-size:16px;">16px</span><br> <span style="font-size :18px;">18px</span>	13px 16px 18px
em	<span style="font-size:1em;">1em</span><br> <span style="font-size:2em;">2em</span>	1em 2em
cm	<span style="font-size:1cm;">1cm</span><br> <span style="font-size:1.2cm;">1.2cm</span><br>	1cm 1.2cm
xx-small	<span style="font-size:xx-small;">xx-small</span>	xx-small
x-small	<span style="font-size:x-small;">x-small</span>	x-small
small	<span style="font-size:small;">small</span>	small
smaller	<span style="font-size:smaller;">smaller</span>	smaller
medium	<span style="font-size:medium;">medium</span>	medium
large	<span style="font-size:large;">large</span>	large
x-large	<span style="font-size:x-large;">x-large</span>	x-large
xx-large	<span style="font-size:xx-large;">xx-large</span>	xx-large
larger	<span style="font-size:larger;">larger</span>	larger
%	<span style="font-size:100%;">100%</span><br> <span style="font-size:120%;">120%</span><br>	100% 120%
inherit	<span style="font-size:inherit;">inherit</span>	inherit

font-size can inherit the properties of the parent layer and present a larger or smaller size. For example, in the example, smaller is smaller than the parent layer, larger is larger than the parent layer, and 200% is twice larger than the parent layer. The meaning of font-size: inherit means to inherit the size of the parent layer, but IE8 and older versions do not support it, so it is not recommended to use it. In addition, the style design of a webpage is usually not only to modify the text size, but also to modify the color or font of the text. Therefore, font-size is often matched with color text color or font-family to produce different style effects.