chrome显示12px以下字体的解决方法

demo如下:

<!doctype html>

<html>
<head>
    <title>chrome显示12px以下字体的解决方法</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        font-family: "微软雅黑";
    }
    .px12 {
        font-size: 12px;
    }
    .px10 {
        font-size: 10px;
    }
    .px8 {
        font-size: 5px;
    }
</style>
<body>

    <div class="px12">
        我是12px
    </div>

    <span class="px10">我是12px</span>
    <br/>

    <div class="px8">
        我是8px
    </div>

</body>

</html>

这样写的时候,chrome下不兼容,显示的都是12号字体,如下图:


第一种方法:

网上搜到的解决方法是:

可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

#chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。

注意:但是,在chrome更新到27版本之后就不可以用了。

第二种方法:

还有一种方法就是将文字做在图片上。

第三种方法:

使用-webkit-transform: scale(0.5);

在 样式中添加

   .px12 {
        font-size: 12px;
    }
    .px9 {
        font-size: 9px;
        display: inline-block;
        -webkit-transform: scale(0.75);        /* 12*0.75=9 */
    }
    .px6 {
        font-size: 6px;
        display: block;
        -webkit-transform: scale(0.5);        /* 12*0.5=9 */
        float: left;
    }

注意-webkit-transform: scale(0.75); 收缩的是整个span的大小,这时候,必须要将span转换成块元素,可以使用display:block/inline-block/...;

效果如下图:


  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值