宋体的显示 --12号字的真正大小

为了更清楚的了解黑管后天height,line-height和font-size 之间的不同与联系 ,做了以下这样一个小小的测试:
xml 代码
  1. <div style="height:20px;  
  2.           background:#efefef; font-size:12px; line-height:20px; padding:10px;">   
  3. 无标题文档<a href="#">我是tiger</a>  
  4. </div>  

如图显示:
在不给定 行高line-height:20px的情况下,行高正常显示应该是12px+2px=14px;
而字体的显示区域是行高 (20xp)—真正的字体高度(11px)—2px,剩下的7px上下平分,先下后上(即剩余为单数时有可能下面比上面多出1px);
12号宋体汉字的真正大小11x11 px的正方体,字的真正高度只有11px.(在vista里得到了调整,还特别出了一种新的字体-微软雅黑 也真正实现了12x12 px);
可以通过以下方式解决这类问题:
在设计中涉及行高时通常让行高减去真正字高后,剩下的高度值为偶数,这样只需在padding时上面比下面多出2px就可以实现字体的真正垂直居中啦!
    eg) font-size:12px;line-height:21px  ; height:21px;padding:5px 0 3px 0;
                                         5+5+11+2+5+3

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值