星空网 > 软件开发 > 网页设计

针对谷歌默认最小字体12px的正确解决方案 (css、html)

  今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了。哪知,改css的时候,谷歌浏览器中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;

                 }

  <p >温馨提示:</p>

  额,想了下,别人应该也会遇到这个问题,不能再被网上并不能解决问题的方法浪费时间了,所以就写了这个随笔~

  哈哈~终于写完了,第一次写,好紧张~




原标题:针对谷歌默认最小字体12px的正确解决方案 (css、html)

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Temu又出新规,大批卖家选择退场:https://www.kjdsnews.com/a/1482688.html
AIGC产业应用的4大趋势:https://www.kjdsnews.com/a/1482689.html
想做外贸?机会来了!阿里国际站每天为外贸新商家推荐1个新商机:https://www.kjdsnews.com/a/1482690.html
巨人互动|Google服务商&Shopyy可以上Google广告吗/怎么呈现:https://www.kjdsnews.com/a/1482691.html
亚马逊评价系统解析:直评和VP评价的深度比较及操作注意事项:https://www.kjdsnews.com/a/1482692.html
机械行业怎么做好内容营销?:https://www.kjdsnews.com/a/1482693.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流