解决如何在谷歌浏览器下定义小于12px的字体的问题

我们发现，在谷歌浏览器下是无法定义一个小于12px的字体的，因为谷歌浏览器的机制，字体的最小值只能是12px。

这就引发了一个问题？要是我们需要定义一段字体小于12px，怎么办呢？

百度上面有很多都说，有一个 -webkit-text-size-adjust 的私有 CSS 属性：

html{-webkit-text-size-adjust:none;}

可以实现字体大小不随终端设备或浏览器影响。

但要是你的谷歌浏览器是比较新的版本，你会发现，新版本的谷歌也不再支持这个属性了，那么我们怎么做，才能使一段文字在谷歌浏览器下小于12px呢？

答案在这里：

我们用到的就是transform:scale()；

这是一个CSS3属性，可以对定义的元素进行缩小，如：

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

说明：0.8在这里是一个缩小的倍速。

因为是定义整个P标签，会对整个P标签的所有属性都进行相应的缩小，包括背景、边框的缩小等。为了避免这个问题的发生，应该单独给要定义的文字添加一个span标签，如：

p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}

说明：inline-block,将元素定义为块属性的元素，transform:scale()才能有效果。

为什么定义 display:inline-block而不是 display:block？

转为block就独占一行啦。如果我后面紧追怎么办元素，所以转换为inline-block。

缩小是缩小了 但是你会发现会存在一定的边距。貌似margin或者padding的间距。这就是缩放存在问题。原来的位置还占有12px字体的大小。

所以，要对应修改margin了。定义为负的。。

还有：

opera现在最新版也是webkit内核啦，新版本的opera本来就是10px的字体了，所以我们要修改样式为：

p{font-size:10px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}

让opera的不缩放。

注：为了方便，我们最好定义为一个类，方便我们每次调用。