今天在做CSS那些事的时候,发现一个有意思的现象; 不同字体设置,会显示出不同的效果或者说异常
先看代码:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>跟随标题时间的新闻列表——2</title> 5 <meta charset="utf-8"> 6 <style> 7 .news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "SimSun", Verdana, Arial, Helvetica, sans-serif;} 8 /*.news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif;}*/ 9 /* 这里发现一个有意思的现象,当这里的字体设置为宋体时候,可以正常显示出新闻标题和时间,但是改成微软雅黑之后,就无法正常显示??!! 10 11 个人推断是雅黑的字体宽度比宋体大,所以会出现以上情况,这时候雅黑的宽度,和后面span的宽度加起来已经超过了li的宽度,所以就换行显示了。 12 */ 13 14 .news_list { width: 300px;} 15 .news_list h3 { height: 24px; font-size: 14px; font-weight: bold; color: #e8e8e8; background-color: #666} 16 .news_list li { float: left; width: 300px; height: 22px;overflow: hidden;} 17 .news_list li a { float: left; width: 230px; margin-right: 70px;} 18 /*增加右补丁给span让出空间*/ 19 .news_list li a:hover { text-decoration: none; color: #f32600;} 20 .news_list li span { float: left; color: #999; margin-left: -65px;/*利用负边距让起紧挨新闻标题*/} 21 22 </style> 23 24 </head> 25 26 <body> 27 <div class="news_list"> 28 <h3>体育新闻</h3> 29 <div class="content"> 30 <ul> 31 <li><a href="#">切尔西夺冠庆祝大游行穆帅笑容迷人切尔西夺冠庆祝大游行 穆帅笑</a><span>2015-05-25</span></li> 32 <li><a href="#">戛纳闭幕:侯孝贤获最佳导演 法国电影夺金棕榈</a><span>2015-05-25</span></li> 33 <li><a href="#">中国首次为境外非政府组织立法 业内多存忧虑</a><span>2015-05-25</span></li> 34 <li><a href="#">央视抨击微商传销背后:自生自灭将成趋势</a><span>2015-05-25</span></li> 35 <li><a href="#">切尔西夺冠庆祝大游行穆帅笑容迷人切尔西夺冠庆祝大游行</a><span>2015-05-25</span></li> 36 </ul> 37 </div> 38 </div> 39 </body> 40 </html>
显示效果如下:
问题代码:.news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "宋体", Verdana, Arial, Helvetica, sans-serif;}
显示效果:
第二种代码:.news_list *{ margin:0; padding:0; list-style: none; font:normal 12px/22px "微软雅黑", Verdana, Arial, Helvetica, sans-serif;}
显示效果:
根据这个现象,推断出雅黑字体要比宋体要大,或者说要宽,那么在页面布局或者使用的时候需要倍加注意,因此而可能带来的显示异常问题,同时也想想使用其他字体时候会不会带来同样的问题,以及如何避免;
解决方案:进行设置对比,优先选择微软雅黑,一般电脑(pc)上都有该字体,其次因为微软雅黑比宋体宽,所以这里更宽的搞定了,窄的自然也没问题;那么这里的代码如果用
微软雅黑字体的时候,应该写成:
margin-right: 70px;这里的值应该加大,比如改成 margin-right: 90px;
而span后面的负边距应该在绝对值上面也增大,比如改成:margin-left:-75px;
然后页面显示就正常了
还有就是脑子中要有这个意识。如果遇到其他代码都没有问题的情况下,想想是不是字体设置出了问题;