解决浏览器无法设置字体小于12px问题的详解

阅读更多

解决浏览器无法设置字体小于12px问题的详解

1.1常用浏览器分析
        Opera 45.0版本默认 不支持设置字体大小在12px以下；
        Safari 默认 支持设置字体大小在12px以下；
        Mozilla firefox 53.0版本默认 支持设置字体大小在12px以下；
        Chrome默认 不支持设置字体大小在12px以下；
        IE 7+版本默认 支持设置字体大小在12px以下；
        通过以上分析，只要搞定Opera和chrome浏览器的默认设置就OK了。
1. 2 chrome浏览器解决方法
1.2.1利用CSS -webkit-text-size-adjust：none；属性来实现
        语法：-webkit-text-size-adjust: 100%|none|auto;
        注意：只对chrome27.0 版本以下有效，27.0以上版本无效。
              桌面版的webkit浏览器，不支持-webkit-text-size-adjust: 100%;。
1.2.2扩展
一、概述
        CSS -webkit-text-size-adjust属性的本职是用于mobile的，之所以现在的桌面版webkit浏览器支持，是因为实际上这是一个bug。但是，这个bug在最新版的 WebKit Nightly Builds 里已经被修复了。
二、作用
        一般用处是防止iPhone在坚屏转向横屏时放大文字。
        注意：viewport设置了maximum-scale=1.0 ，文字还是会放大的。
              iPhone默认设定 -webkit-text-size-adjust: auto。
              iPad默认设定-webkit-text-size-adjust: none。
        当设置iPhone横坚屏切换时文字不调节，用-webkit-text-size-adjust: 100%;绝对不能用-webkit-text-size-adjust: none;。因为这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小，严重影响可用性。
1.2.3 利用CSS -webkit-transform: scale( );属性来实现
        当使用transform:scale()时，不仅是文字变小了，整个文字所在的容器标签也同时会变小。