解决CSS小于12px的文字在谷歌浏览器显示问题

做前端设计的人经常要接触CSS方面的问题,估计有不少人会遇到Chrome谷歌浏览器中CSS设置字体小于12px显示不正常,强创网络在做magento模板过程中就遇到了,起初以为是自己写的CSS的问题,后面一步步排查出来,在Chrome谷歌浏览器中确实不支持CSS设置字体小于12px,那我们要如何解决Chrome谷歌浏览器不支持CSS小于12px文字的问题呢? 今天强创网络来讲下具体方法。
Chrome谷歌浏览器是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下:
-webkit-text-size-adjust:none;
使用这个CSS属性可以解决问题。
如:div { -webkit-text-size-adjust:none;font-size:10px }
这里要声明一点,使用了这个属性后,Chrome下字体就不支持放大、缩小功能了哦。。。这个影响也不大,一般很少人用放大,缩小功能。
以上解决办法来自网络,经过了半小时,关于谷歌浏览器显示CSS样式设置字体大小问题终于解决了,这样其他浏览器也不会因为此CSS样式属性而受影响。

原文地址:https://www.cnblogs.com/focai/p/4195947.html