CSS 如何制作 10px 或者更小像素的字体

在网页中，经常会有一些促销标签，设计师很喜欢把这些便签的颜色设计的很醒目而字体很小，当然我们不讨论这种设计在视觉上会产生什么效果，我们现在要讨论的是如何制作这种小字体。

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

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

PC 浏览器中制作 10px 的字体

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

.font10px {
    font-size: 12px;
    transform : scale(0.83,0.83);
    *font-size: 10px;
}

Mobile 浏览器中制作 10px 的字体

由于 Mobile 端绝大多数浏览器采用的是 Webkit 内核，我们只需要设置-webkit-text-size-adjust: 100%;，这样一来就可以在 Webkit 浏览器中设置任意大小的字了。

其它方式

还有一些方式可以制作小字体：

• 图片

• 自制字体

• SVG