谷歌浏览器小字体处理方案即12px以下字体

站长手记 作者: 2024-09-03 11:40:01
谷歌浏览器是不支持12px以下小字体的,可能是考虑到用户体验吧。

网上也有一些文章介绍,说可以使用:

代码如下:

-webkit-text-size-adjust:none;


但是,自chrome 27之后,就取消了对这个属性的支持。

我们还有其它办法解决这个问题吗?

谷歌浏览器支持CSS缩放,于是,我们可以在这方面做文章:

代码如下:

-webkit-transform: scale(0.5);


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

代码如下:

.test_tag{

font-size:12px;

-webkit-transform-origin-x: 0;

-webkit-transform: scale(0.5833333333333334);

}

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

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_73558.html