12px以下字体显示问题

刚接到广告公司出的设计稿，里面很多内容均是12px以下得字体，现在来总结一下解决办法，方便以后使用

1.使用png图片 但是会影响页面响应速度

2.使用transform: scale(0.x);

注意此时文本容器 必须是可以设置宽高的,即display属性 必须是inline-block或block

计算公式：12px * 0.75（缩放比例） = 9px

    font-size: 9px;
    display: block;
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);

就会出现如图效果  12px 和9px 的字体对比

由于原理上还是放大缩小 所以字体位置可能会改变 这时候还要加一个属性

 -webkit-transform-origin-x: 0; 

备注 IE7，IE8不兼容

 .font9 { 　　　　font-size:9px;       　　        }