Font attribute settings: Display of fonts below 12px in Google browser; method and principle: Google 12px

Font attribute settings: Display of fonts below 12px in Google browser; method and principle: Google 12px

Preface:

Chrome

Google's default font size is 16 PX. You can set font-size to set the font size, but the font size will not change when it is set to below 12 PX; it is a headache to set fonts of other sizes. In this article, refer to the methods on the Internet and introduce the methods and principles; the disadvantages of this method are described and a suitable solution is proposed. 1. intended audience:Block or inline-block type; 2. Method (This method uses the p tag as an example ):Method: Set transform: scale (); limitation: the label will move (see the following code and image). Solution: Set transform-origin;

<! DOCTYPE html> 
 

The default value is 16px;
<! DOCTYPE html> 

It can be found that when the scale ratio is set to 0.8, the font size is 16pxX 0.8 = 12.8px.
<! DOCTYPE html> 
When font-size: 10px is set in p, the scale is scaled to 10px. (You can see that the label is moved after the scale is set. The solution is described below) all elements of p are scaled according to the zooming ratio of p. 3. principle:
<! DOCTYPE html> 


When adding the parent container to p and setting the width and height of p and the border, set scale0.8, p tags are automatically centered up and down (the original width and height-the scaled width and height are evenly distributed to the upper and lower sides );
Using the box model provided by chrome, we found that the content occupied by p labels is still 300px X 300px in width;

When the span element is added after p (div), it is found that span is out of the div range, indicating that proportional scaling only changes the size of the original tag form; the space occupied by the original file stream is not scaled out;

It is found that the span is still squeezed out after the position of p is changed.
Principles and summary of this method:1. set scale to scale the entire p tag (including all the elements of p and its content), not just the font. after zooming, the width and height before zooming-the width and height after zooming are automatically allocated to the top, bottom, and left of the p label; but scaling does not change the size of the tag's original position in the Document Stream; it does not free up space due to scaling; 3. after scaling, the position of the scaled object changes. 4. this is also the reason why scale is not applicable to inline elements (width and height cannot be set; although its own width and height are supported by content; however, you cannot obtain accurate width information when setting css (I understand it). Therefore, if you want to set the font-size of the inline type, you must first set display: block or inline-block. 4. solution (to solve the offset problem ):
<! DOCTYPE html> 
Add-webkit-transform-origin: 0 0 to the scaling object, or-webkit-transform-origin-x: 0;-webkit-transform-origin-y: 0;