Chrome浏览器最小字体12px限制问题解决方法

问题描述:

  页面宽度有限的情况下显示大数据,采用font-size:8px来压缩字体大小,版本 25.0.1547.66及以下版本的chrome浏览器没有问题,后续版本的就不可以了;

问题原因:

  浏览器设置了最小字体限制;配置文件在"Documents and SettingsUser_NameLocal SettingsApplication DataGoogleChromeUser DataDefaultPreferences",内容如下:  

"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来设置变换,这样就可以了。


原文地址:https://www.cnblogs.com/cuc-ygh/p/3319991.html