Chrome不支持css字体小于12px的解决办法

工作过程中，需要做一个效果使字体小于12px，但是chrome浏览器的字体小于12px通通显示为12px，我尝试了两种解决方法

解决方案一

用PS做一个小于12px的字体，并导出为png图片，但是效果是，字特别糊，以看就知道是图片

所以这个方案失败

解决方案二

大家普遍用的是

-webkit-transform:scale(0.5);

于是我也采用了这个方法，但是其中一个尝试多次无效果，看了这个文章 http://www.mamicode.com/info-detail-2222169.html ，才发现问题，原来是要先把字体所在元素定义为行内元素。这是因为

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;就好了