Chrome谷歌浏览器下不支持css字体小于12px的解决办法

先来看下 ie、火狐、谷歌浏览器下各个字体显示状况

ie下：

火狐下：

谷歌下：

从上面的图能够很明显看出谷歌下 css设置字体大小为12px及如下时，显示都是同样大小，都是默认12px;

那么网上一直有一个方法就是给当前样式添加谷歌私有属性：-webkit-text-size-adjust:none;

但是我进行验证后发现，在谷歌如今的新版本里已经无效。那么咱们应该如何设置谷歌下的字体呢？

咱们可使用到 css3里的一个属性：transform:scale()

属性介绍能够戳这里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html

这个属性前给-webkit-谷歌前缀，那么就能够控制字体的大小，代码以下：

 

1 2 3 4 5 6 7

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

 

以下图：

可是要注意一点，若是这个<p>元素有背景的话，给这个属性会使背景也随着变化，因此，咱们能够给<p>标签里再套个<span>

 

1 2 3 4

<style> p span{font-size:10px;-webkit-transform:scale(0.8);} </style> <p><span>中梦测试10px</span></p>

 

你会发现没有效果，如图：

这是由于transform:scale()这个属性只为能够缩放能够定义宽高的元素，而span是行内元素；

咱们能够给span元素定义一个display:block,这样就能够了。

 

1 2 3 4

<style> p span{font-size:10px;-webkit-transform:scale(0.8);display:block;} </style> <p><span>中梦测试10px</span></p>

 

这样在谷歌浏览器下走一遍，字体就能更改了。

若有不足，还望补充。

番外篇：

中文版的chrome有个12px字体限制的问题，就是当字体小于12px时候都以12px来显示，这个问题在中文网站中并不突出，由于中文字体为了显示清晰通常都定义为大于或等于12px，但若是是一些英文网站那就很差说了，这时12px的限制就会破坏页面的美感，甚至由于文字变大而致使页面变形。

 

可使用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;

 

虽然有一点差距。不能精确到小数点后两位。。可是已经很好了。能够凑合用了。