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

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

谷歌浏览器是不支持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。


原文链接:HelloWeb前端网 » 对于谷歌浏览器不支持12号以下字体的终极解决办法 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享