如何在谷歌设置小于12px的字体？

最新推荐文章于 2024-12-17 22:29:05 发布

无-题

最新推荐文章于 2024-12-17 22:29:05 发布

阅读量1k

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

23 篇文章

订阅专栏

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

问题描述：

　　页面宽度有限的情况下显示大数据，采用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来设置变换，这样就可以了。

转载于出处