tofacebook.com -专业IT技术社区 Chrome不支持css字体小于12px的解决办法 Web程序 - tofacebook.com-专业IT技术社区
140°

Chrome不支持css字体小于12px的解决办法 Web程序

标签:pos   没有   splay   chrome浏览器   font   自适应   提示   inline   ocs   

我们先来看个效果图(chrome下):


技术分享图片

从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px;

那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none;
可是我进行验证后发现并无效果。后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢?

可以利用css3的缩放属性:transform:scale()

.small-font{ font-size: 12px; -webkit-transform: scale(0.5); } 

这样在元素上加上这个属性就OK了,但是只这样写可不会兼容IE、FF哦,所以再给一个兼容性写法:

.small-font{
  font-size: 12px;
  -webkit-transform: scale(0.5);
}
.smallsize-font{
  Font-size: 6px;
}

<p class=“small-font samllsize-font”>温馨提示</p> 

这时候有同学说你这不对啊,我加了这样式就没效果,别急哈,仔细看下你的元素是不是行内元素啊?
注意:transform:scale()这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个display:inline-block;属性就好啦。

PS:有小伙伴让用rem解决,我在这里解释一下哈,em、rem是一种相对单位,根据根元素的大小计算出来,目的是浏览器的字体大小变化时,页面布局及字体大小能跟着自适应。也就是说反应到浏览器要渲染是还是xx px,那Chrome浏览器本身是渲染不了12px以下的字体的,所以这个方法是不可行的,rem虽好,但不对这个症。

Chrome不支持css字体小于12px的解决办法

标签:pos   没有   splay   chrome浏览器   font   自适应   提示   inline   ocs   

原文地址:https://www.cnblogs.com/zytrue/p/8568160.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: