What are the options for Chrome to support text smaller than 12px? The difference between them?

Chrome is the core of Webkit and has a private CSS property [-webkit-text-size-adjust] that allows you to adjust the font size regardless of the device or browser. The CSS styles are defined as follows: -webkit-text-size-adjust:none;

But in the latest version of Google. This property is no longer supported by cSS3’s transform.

P {margin:0; padding:0; } p{font-size:10px; } span {- its - transform: scale (0.8); -o-transform:scale(1); display:inline-block; }Copy the code
HTML layout <p><span ID =" SPAN1 "> I am a font less than 12PX </span></p>Copy the code

Explanation:

1.//0.8 bit zoom factor, can be modified according to actual needs, can only zoom elements can be defined width and height, and span is an inline element.

{its - transform: scale (0.8); display:inline-block}Copy the code

Why define display:inline-block instead of display:block? Converting to block takes a row, so switch to inline-block

{-o-transform:scale(1); }Copy the code

The latest version of Opera is also a WebKit kernel, and the new version of Opera is a 10px font.