Chrome Google Browser does not support the CSS font less than 12px solution

First look at the IE, Firefox, Google Browser under the various font display situation

IE under:

Under Firefox:

Google under:

From the above figure can be clearly seen Google under the CSS settings font size 12px and below, the display is the same size, are the default 12px;

Then there is always a way to add Google private properties to the current style:-webkit-text-size-adjust:none;

However, I verified that the new version of Google is now invalid. So how do we set the font under Google?

We can use a property in the CSS3:transform:scale ()

Property description can be stamped here: http://www.w3chtml.com/css3/properties/2d-transform/transform.html

This property before the-webkit-Google prefix, then you can control the size of the font, the code is as follows:

1 2 3 4 5 6 7

<style> p{font-size:10px;-webkit-transform:scale(0.8);} /*这里的数字0.8，是缩放比例，可以根据情况变化。*/ </style> <p>中梦测试10px</p>

Such as:

But note that if the <p> element has a background, giving this attribute will change the background as well, so we can set a <span> in the <p> tag.

1 <style>2 P span{font-size:10px;-webkit-transform:Scale (0.8);}3 </style>4 5 <P><span>Middle Dream Test 10px</span></P>

You will find no effect,

This is because Transform:scale () is a property that can be scaled to define a wide-height element, while span is an inline element;

We can define a display:block for the span element, so we can do it.

1 <style>2 P span{font-size:10px;-webkit-transform:Scale (0.8);Display:Block;}3 </style>4 5 <P><span>Middle Dream Test 10px</span></P>

The font can be changed by walking through Google Chrome.

Chrome Google Browser does not support the CSS font less than 12px solution