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

<span id="Label3"></p><p><p>First look at the ie, firefox, Google Browser under the various font display situation</p></p><p><p><strong>IE under:</strong></p></p><p><p></p></p><p><p><strong>Under Firefox:</strong></p></p><p><p></p></p><p><p><strong>Google Under:</strong></p></p><p><p></p></p><p><p>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;</p></p><p><p>Then there is always a way to add Google private properties to the current style:-webkit-text-size-adjust:none;</p></p><p><p>however, I verified that the new version of Google is now INVALID. So how do we set the font under google?</p></p><p><p>We can use a property in the Css3:<strong>transform:scale ()</strong></p></p><p><p>Property description can be stamped here: http://www.w3chtml.com/css3/properties/2d-transform/transform.html</p></p><p><p>This property before The-webkit-google prefix, then you can control the size of the font, the code is as Follows:</p></p><p><p></p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p></td> <td class="code"><p><code class="xml plain"><</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain">p{font-size:10px;-webkit-transform:scale(0.8);}</code></p><p><code class="xml plain">/*这里的数字0.8，是缩放比例，可以根据情况变化。*/</code></p><p><code class="xml plain"></</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain"><</code><code class="xml keyword">p</code><code class="xml plain">>中梦测试10px</</code><code class="xml keyword">p</code><code class="xml plain">></code></p></td> </tr> </tbody> </table><p><p></p></p><p><p>Such as:</p></p><p><p></p></p><p><p>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.</p></p><p><p></p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"><p>1</p><p>2</p><p>3</p><p>4</p></td> <td class="code"><p><code class="xml plain"><</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain">p span{font-size:10px;-webkit-transform:scale(0.8);}</code></p><p><code class="xml plain"></</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain"><</code><code class="xml keyword">p</code><code class="xml plain">><</code><code class="xml keyword">span</code><code class="xml plain">>中梦测试10px</</code><code class="xml keyword">span</code><code class="xml plain">></</code><code class="xml keyword">p</code><code class="xml plain">></code></p></td> </tr> </tbody> </table><p><p></p></p><p><p>You will find no effect,</p></p><p><p></p></p><p><p>This is because <strong>Transform:scale ()</strong> is a property that can be scaled to define a wide-height element, while span is an inline element;</p></p><p><p>We can define a display:block for the span element, so we can do it.</p></p><p><p></p></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="gutter"><p>1</p><p>2</p><p>3</p><p>4</p></td> <td class="code"><p><code class="xml plain"><</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain">p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}</code></p><p><code class="xml plain"></</code><code class="xml keyword">style</code><code class="xml plain">></code></p><p><code class="xml plain"><</code><code class="xml keyword">p</code><code class="xml plain">><</code><code class="xml keyword">span</code><code class="xml plain">>中梦测试10px</</code><code class="xml keyword">span</code><code class="xml plain">></</code><code class="xml keyword">p</code><code class="xml plain">></code></p></td> </tr> </tbody> </table><p><p></p></p><p><p>The font can be changed by walking through Google Chrome.</p></p><p><p>If there are deficiencies, also hope to Add.</p></p><p><p>Foreign article:</p></p><span>the <span>Chinese version of Chrome has a 12px font limit problem, that is, when the font is less than 12px is displayed in 12px, this problem in the Chinese site is not prominent, because the Chinese font in order to display clarity is generally defined as greater than or equal to 12px, but if it is some English site that is not good to say , the 12px limit will damage the beauty of the page, even because the text becomes larger and cause the page to Deform. </span></span><p><p><span></span></p></p><p><p><span>can use the WebKit kernel of the-webkit-text-size-adjust of the private CSS properties to solve, such as the following code can be successfully resolved, through which the font size will not be affected with the terminal device or Browser. The style is defined as Follows:</span></p></p><p><p><span>#chrome10px {-webkit-text-size-adjust:none; font-size:10px;}</span></p></p><p><p><span>Just add the-webkit-text-size-adjust:none; The font size is not limited.</span></p></p><p><p><span></span></p></p><p><p><span style="color: #ff0000;">however, It is not available after Chrome has been updated to version 27.</span></p></p><p><p><span>So what should we do now? Think about it, There is a way to solve it.</span></p></p><p><p><span></span></p></p><p><p><span>Chrome is supported for css3. Then whether we can write,</span></p></p><p><p><span></span></p></p><p><p><span>-webkit-transform:scale () method to solve it?</span></p></p><p><p><span></span></p></p><p><p><span>Because IE is supported by the size of number 12th and BELOW.</span></p></p><p><p><span>font-size:12px;</span></p></p><p><p><span>-webkit-transform:scale (0.84,0.84);</span></p></p><p><p><span>*font-size:10px;</span></p></p><p><p><span></span></p></p><p><p><span style="font-family: Verdana, Arial, 宋体;">Although there is a little difference. Cannot be accurate to two digits after the decimal point: But it's good enough. It can be used.</span></p></p><p><p>Chrome Google Browser does not support the CSS font less than 12px solution</p></p></span>