中文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);
   }