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

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

IE below:

Under Firefox:

Google under:

From the above figure can be clearly seen under Google CSS settings font size of 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 have verified that the new version of Google is now invalid. So how do we set Google's fonts?

We can use one of the attributes in CSS3: Transform:scale ()

Property description can be stamped here:http://www.111cn.net/cssdiv/css/126293.htm

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

But be aware that if this

If the element has a background, giving this property will cause the background to change as well, so we can give

To give the <p> label a second set of <span>

<style>

P Span{font-size:10px;-webkit-transform:scale (0.8);}

</style>

<p><span> Dream Test 10px</span></p>

You will find no effect, as shown in figure:

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

We can define a display:block for the span element, so that's it.

<style>

P Span{font-size:10px;-webkit-transform:scale (0.8);d Isplay:block;}

</style>

<p><span> Dream Test 10px</span></p>

This way, the font can be changed by walking through Google's browser.

If there is insufficient, also hope to add.