中文Chrome最小字体问题

问题：中文Chrome中最小字体为12px，设置更小字体的解决办法

解决办法：

1. 移动端的Chrome浏览器，禁止webkit浏览器配置调整网页的字体大小， 可以通过CSS属性
   -webkit-text-size-adjust来禁止网页调整字体大小，该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小，safari 3.0+，chrome 1.0+可以支持。属性值，可以为三种：

   • percentage：字体显示的大小

   • auto：默认，字体大小会根据设备/浏览器来自动调整

   • none:字体大小不会自动调整

       .fs-8 {
          -webkit-text-size-adjust: none;
          font-size: 8px; 
       }

   注意:

   • 不合理的使用-webkit-text-size-adjust:none会造成许多不好的影响。比如将其定义为全局属性的话，在Chrome中当用户放大缩小页面（PC上按住Ctrl滚动鼠标滚轮可缩放网页）的时候，文字却维持定义的大小而不放缩，给用户带来的不太友好的体验。所以我们在使用时，最好定义为局部有效。

   • 由于没有 -o-text-size-adjust，这样的CSS 属性，在 Opera，我们就只能通过自己手动设置了：工具->首选项->高级->字体->最小字体大小（像素）。

2. PC端的Chrome浏览器，Chrome 27正式取消了-webkit-text-size-adjust属性的支持，在PC端使用该属性都不会起作用，控制台会显示Unknown property name。解决办法是使用CSS3中的transform, 该该元素缩小n倍，如：

   .fs-10 {
       font-size: 12px;
       width: 118%;
   
       -webkit-transform: scale(0.82) translate(-9%, 0px);
       -moz-transform: scale(0.82) translate(-9%, 0px);
       -ms-transform: scale(0.82) translate(-9%, 0px);
       -o-transform: scale(0.82) translate(-9%, 0px);
       transform: scale(0.82) translate(-9%, 0px);
   }

   // sass mixin
   @mixin webkit-font-size($size: 10) {
     font-size: 12px;
     width: percentage((1 - $size / 12) + 1);
   
     -webkit-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
     -moz-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
     -ms-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
     -o-transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
     transform: scale($size / 12) translate(percentage(-(1 - $size / 12) / 2), 0);
   }