公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

对于谷歌浏览器不支持12号以下字体的终极解决办法

对于谷歌浏览器不支持12号以下字体的终极解决办法_www.uibq.com

谷歌浏览器是不支持12px以下小字体的,默认最小字体为12px,小于12px的字体它都以12px显示,可能是考虑到用户体验吧。有时我们需要字体小点,特别是在制作英文网站时,所以很蛋疼。不过还是有解决方案的。网上也有一些文章介绍,说可以使用:

看下面:在html或者body里添加一句谷歌浏览器专有的属性。
代码如下:

-webkit-text-size-adjust:none;

但是,自chrome 27之后,就取消了对这个属性的支持。
我们还有其它办法解决这个问题吗?
当然可以!谷歌浏览器支持CSS缩放,于是,我们可以在这方面做文章:

代码如下:

-webkit-transform: scale(0.5);

既然最小支持到12px,那么就以12px为基点进行缩放,
同时可以使用-webkit-transform-origin-x: 0; 来解决缩放后margin-left的位移问题:

代码如下:

.helloweb{ 
    font-size: 12px; 
    -webkit-transform-origin-x: 0; 
    -webkit-transform: scale(0.5833333333333334); 
}

scale值的计算方法为: 7 / 12 = 0.5833333333333334。


    关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)