css 让chrome支持小于12px的文字

问题描述:

chrome浏览器限制了文字的大小,最小只能是12px,以前可以使用Chrome的CSS私有属性-webkit-text-size-adjust:none; (只对英文才有效,对中文无效。)来取消Chrome的字体限制。但是,在chrome更新到27版本之后就删除了这个属性。

如图所示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

问题解决

1.利用transform属性来解决这个问题
在这里插入图片描述
在这里插入图片描述
但是这里会发现,虽然字体改变了,但是位置也发生了变化,这是因为transform:scale()只能对块元素设置,设置后宽高也会比例缩放,transform属性影响了宽高,对布局产生了影响,这里我们利用translate方法可以改变它的位置
在这里插入图片描述
在这里插入图片描述