0
点赞
收藏
分享

微信扫一扫

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 的字体对比

12px以下字体显示问题_不兼容

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

-webkit-transform-origin-x: 0;

备注 IE7,IE8不兼容 

.font9 {     font-size:9px;                 }

 



举报

相关推荐

0 条评论