先来看下 ie、火狐、谷歌浏览器下各个字体显示情况
ie下：
火狐下：
谷歌下：
从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px;
那么网上一直有一个方法就是给当前样式添加谷歌私有属性：-webkit-text-size-adjust:none;
可是我进行验证后发现，在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢？
我们可以使用到 css3里的一个属性：transform:scale()
属性介绍可以戳这里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html
这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小，代码如下：
<style>
p{font-size:10px;-webkit-transform:scale(0.8);}
/*这里的数字0.8，是缩放比例，可以根据情况变化。*/
</style>
<p>中梦测试10px</p>
如下图：
但是要注意一点，如果这个<p>元素有背景的话，给这个属性会使背景也随着变化，所以，我们可以给<p>标签里再套个<span>
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);}
</style>
<p><span>中梦测试10px</span></p>
你会发现没有效果，如图：
这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素，而span是行内元素；
我们可以给span元素定义一个display:block,这样就可以了。
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>中梦测试10px</span></p>
这样在谷歌浏览器下走一遍，字体就能更改了。
如有不足，还望补充。
番外篇：
可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决，比如下面的代码就可以成功的解决，通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下：
#chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }
只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。
但是，在chrome更新到27版本之后就不可以用了。
那此时应该怎么办呢？想一想，还是有办法解决的。
chrome是支持css3的。那么我们是否可以写，
-webkit-transform : scale() 方法来解决呢？
因为ie是支持12号及以下字号的。
font-size : 12px;
-webkit-transform : scale(0.84,0.84) ;
*font-size:10px;
虽然有一点差距。不能精确到小数点后两位。。但是已经很好了。可以凑合用了。
本文转载自：http://www.cnblogs.com/jiangxiaobo/p/5669976.html
