在网页中，经常会有一些促销标签，设计师很喜欢把这些便签的颜色设计的很醒目而字体很小，当然我们不讨论这种设计在视觉上会产生什么效果，我们现在要讨论的是如何制作这种小字体。
字体大小限制在有些浏览器（Chrome）上需要做设置的，例如：Chrome 默认最小字体大小为12px，小于12px的字体都显示12px大小，不过你可以设置最小到6px。当然对于普通的用户是不会对它进行设置的，所以需要一些技术手段来做这种小字体。下面是不同平台不同浏览器对字体大小的限制：
| 平台 | 浏览器 | 默认最小字体 | 最小字体限制 |
|---|---|---|---|
| Mac | Chrome | 12px | 6px |
| Mac | Safari | 0px | no |
| Mac | Firefox | 0px | no |
| Win | Chrome | 12px | 6px |
| Win | IE11 | 0px | no |
| Win | Edge | 0px | no |
| Win | Firefox | 0px | no |
| Mobile | Webkit | 12px | 12px |
注：在 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
网友评论