zoukankan      html  css  js  c++  java
  • 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来设置变换,这样就可以了。

    
    
  • 相关阅读:
    网上订餐系统后台代码bug记录与解决
    vector二维数组
    力扣-树-练习题(一)
    优先队列

    并查集
    C++进制转换函数
    平衡二叉树(AVL树)定义与基本操作
    二叉查找树练习题
    树的遍历
  • 原文地址:https://www.cnblogs.com/cuc-ygh/p/3319991.html
Copyright © 2011-2022 走看看