谷歌浏览器默认最小字体为12px
,小于12px
的字体它都以12px
显示,无论fontSize
怎么调整,字体大小都不变,如果确实要用到更小的字体,可以通过css
属性transform: scale();
来缩小字体。
网上有一个方法就是在html
或者body
里添加一句谷歌浏览器专有的属性。
html,body{ -webkit-text-size-adjust:none; }
可是我用了之后发现并没有什么用,原来在新版本的谷歌浏览器里已经无效。那我们应该怎么办?
发现了另外的一种方法,就是缩放方法
.small{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform-origin-y: 0;
-webkit-transform: scale(0.6);
/*这个数字0.6,是缩放比例,可以根据你自己的情况不同而不同。*/
}
首先是定义字体为12px
,-webkit-transform-origin-x
属性是定义了x
方向(水平)的基点位置,-webkit-transform-origin-y
属性是定义了y
方向(竖直)的基点位置;
scale(0.6)
是缩放比例,最终的字体大小就是12px * 0.6 =7.2px
,这就实现了字体缩放的效果,但是可能某些浏览器不兼容一些属性,所以应该再写一个font-size为10.8px
,在这个要缩放的标签上添加class="small small-size"
这个属性。
.small-size{
font-size:10.8px; }
拜