Low-key CSS3 attribute Font-size-adjust

In our daily projects often use different fonts to achieve the effect we want, but in some cases the size of the different fonts in the same PX under the size of the display is different

<DivID= "Div1">Text 1</Div><DivID= "Div2">Text 2</Div><DivID= "Div3">Text 3</Div><DivID= "Div4">Text 4</Div>div#div1 {font-family:comic Sans Ms; font-size:16px;}    div#div2 {font-family:tahoma; font-size:16px;}    Div#div3 {font-family:arial; font-size:16px;}    div#div4 {font-family:times New Roman; font-size:16px;}

The following results are displayed under Firefox.

You can see that the same 16px fonts appear in the browser, the size of the missing, may be the original arrangement of the layout of the page is confusing, this is the most sad thing. So:

DIV#DIV1 {    font-family:comic Sans Ms;    font-size:16px;    font-size-adjust:0.50;} div#div2 {    font-family:tahoma;    font-size:16px;    font-size-adjust:0.54;} Div#div3 {    font-family:arial;    font-size:16px;    font-size-adjust:0.54;} div#div4 {    font-family:times New Roman;    font-size:16px;    font-size-adjust:0.49;}

Add a different Font-size-adjust value to each CSS and now appear in the browser as we wish (by default, the size of the last font is displayed):

Before looking at the protagonist of Font-size-adjust, let's look at the value of this property-aspect, what is aspect? Example: Verdana's aspect value is 0.58 (meaning that when the font size is 100px, its x-height is 58px). Each font has its own default aspect value.

The Font-size-adjust property is to specify a aspect value for an element so that the x-height of the preferred font can be maintained. The ratio between the height of the lowercase letter "x" of the font and the "font-size" height is called the aspect value of a font.   When a font has a high aspect value, it is easier to read when the font is set to a small size. --From the consortium

How the browser calculates the aspect value: c= (A/b) s A: Represents the aspect value of the actual font used, B represents the aspect value of the pre-modified font, s represents the specified font size, and C is the size that the browser displays last. So when we use a different font than the original page in our page, we can use Font-size-adjust to adjust the size of the foreign font so that he looks just like the size of the original font, so it doesn't have an unpredictable effect on the layout of the page.

Finally, there are more unknown waiting to explore, or that sentence, small characters can sometimes become big heroes!

Low-key CSS3 attribute Font-size-adjust