针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案(实用)

您所在的位置:网站首页 谷歌最小字体限制 针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案(实用)

针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案(实用)

2024-07-12 17:33| 来源: 网络整理| 查看: 265

原文出处:https://blog.csdn.net/qq_27682041/article/details/72850719

谷歌浏览器中font-size小于12px时,字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是,只百度一伙了,结果还真让人大吃一惊:原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那么多了,反正要解决这个问题呀~既然这是一个经典的兼容性问题,一定有很多解决方法吧。让人吃惊的是,再百度一伙,网上所有的解决方案都惊奇地相似:

html{   -webkit-text-size-adjust:none;   }

  然后我满心欢喜地用上去之后,发现并没有什么鸟用。再后来,又查了下资料了解到在chrome 27之后,就取消了对这个属性的支持。尼玛,这不是坑爹吗?柳暗花明又一村,然后发现了另一种解决办法:

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

  利用css3的缩放,其最终大小就是:12px * 0.9(缩放比例) = 10.8px;

  居然行得通。但回头一想,这么写的话,IE7 IE8会不会不兼容,还是12px呢?不出所料,果然不兼容。此时,又回头一想,要不再加个样式font-size?试了一下,果然兼容谷歌,IE7,IE8,代码如下:

.small-font{     font-size:12px; -webkit-transform-origin-x: 0; -webkit-transform: scale(0.90); } .smallsize-font {      font-size:10.8px;    }  

温馨提示:

最终用small-font 和 smallsize-font 两个类搞掂兼容性问题 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3