众所周知，Google浏览器最小字体为12px，那如何实现更小的10px字体呢？在网页中，经常会有一些促销标签，设计师很喜欢把这些便签的颜色设计的很醒目而字体很小，当然我们不讨论这种设计在视觉上会产生什么效果，我们现在要讨论的是如何制作这种小字体。

字体大小限制在有些浏览器（Chrome）上需要做设置的，例如：Chrome默认最小字体大小为12px，小于12px的字体都显示12px大小，不过你可以设置最小到6px。当然对于普通的用户是不会对它进行设置的，所以需要一些技术手段来做这种小字体。下面是不同平台不同浏览器对字体大小的限制：

平台浏览器默认最小字体最小字体限制
MacChrome12px6px
MacSafari0pxno
MacFirefox0pxno
WinChrome12px6px
WinIE110pxno
WinEdge0pxno
WinFirefox0pxno
MobileWebkit12px12px

注：在Chrome浏览器中，虽然最小字体到6px，但是当它设置为0px时，文字会看不见。

方法一：切图解决
小于12px的字体，如果内容固定，可以将内容切除做图片，没有兼容问题

方法二：-webkit-transform:scale(0.8);c3的新属性，但是使用这个之后，如果该标签有背景图，那背景图也会被缩放，解决办法：给该标签里包裹一个span标签，设置样式display:block;

从上面的浏览器的表格中我们不难看出只有Chrome才有对字体的限制，Chrome是支持CSS3的，我们可以用缩放的方式来制作10px字体。需要一些计算：10px = 12px * 0.83或者10px = 20px * 0.5；当然我们会优先采用第一个计算方式，因为避免不支持CSS3浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;：

因为谷歌浏览器机制问题，默认的css字体大小最小为12px，但是设计有要求比12px更小，这种情况下怎么办？

font-size: 12px，给文本设置字体12px，并设置缩放值为10/12=0.83333，也就是transform:scale(0.83)；
如果要设置8px，那就是8/12=0.66666；
transform-origin：0 0；默认缩放中心点是在盒子的正中心，所以如果我们需要文本左对齐，就需要改变中心点，也就是transform-origin：0 0；该值有两个参数值，第一个是水平方位值，第二个是垂直方位值，对应的如果需要右对齐、或者是有缩进，那就改变对应的参数值即可。

1
2
3
4
5
.font10px {
    font-size: 12px;
    transform : scale(0.83,0.83);
    *font-size: 10px;
}

方法三：CSS3新属性-webkit-text-size-adjust
由于移动端端绝大多数浏览器采用的是Webkit内核，我们只需要设置-webkit-text-size-adjust: 100%;，这样一来就可以在移动端Webkit浏览器中设置任意大小的字了。**但是需要注意的是：-webkit-text-size-adjust:none老版本谷歌，27版本之后无用。**