问题描述:
页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了;
问题原因:
浏览器设置了最小字体限制;配置文件在"Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences",内容如下:
"webkit" : {
"webprefs" : {
"default_fixed_font_size" : 11,
"default_font_size" : 12,
"fixed_font_family" : "Bitstream Vera Sans Mono",
"minimum_font_size" : 12,
"minimum_logical_font_size" : 12,
"sansserif_font_family" : "Times New Roman",
"serif_font_family" : "Arial",
"standard_font_is_serif" : false,
"text_areas_are_resizable" : true
}
}
所以当设置了小于12px的字体是无效的;
历史解决方案:
经查询以前大家经常用-webkit-font-size-adjust:none;新版浏览器已不再支持该属性;有人还提出了用css3中的-webkit-transform:scale(num),其中num是设置的字体大小/12px,如font-size:8px,则num=8/12=0.67,不过这种方法虽然可以实现小字体,但是字体仍然“占位”即占据大字体的位置只是缩小了字体;
现在的解决方案:
配合html,-webkit-transform:scale(num)来解决问题。
<td class=" ft8" title="289"><em>289</em></td>
.ft8 {
font-size: 8px;
font-family: Arial;
}
.ft8 em {
display: inline-block;
width: 10px;
height: 10px;
-webkit-transform: scale(0.7,0.7);
}
ft8父级样式来定位需要变换的元素的"流",ft8 em来设置变换,这样就可以了。