針對谷歌默認最小字體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 style="color: #FF0000;" class="small-font smallsize-font">溫馨提示:</p>

  額,想了下,別人應該也會遇到這個問題,不能再被網上並不能解決問題的方法浪費時間了,所以就寫了這個隨筆~

  哈哈~終於寫完了,第一次寫,好緊張~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM