怎么让Chrome支持小于12px 的文字?

本文介绍了一种在谷歌Chrome浏览器中解决最小字体限制的方法,通过使用-webkit-transform:scale()属性,可以实现设计师要求的更小字体显示效果,避免了实际展示与设计稿之间的差异。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个我们在做移动端的时候,设计师图片上的文字假如是10px,我们实现在网页上之后。往往设计师回来找我们,这个字体能小一些吗?我设计的是10px?为啥是12px?其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,在浏览器中只会显示12px,那么如何解决这个坑爹的问题呢?

我们的做法是:

针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放!

<style>

p span{
    font-size:10px;
    -webkit-transform:scale(0.8);
    display:block;
}

</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值