解決360瀏覽器和Google(Google Chrome)瀏覽器下CSS設定字型大小小於12px無法生效的問題

來源:互聯網
上載者:User

今天在公司測試Magento模版的相容性時發現了一個問題 - Google瀏覽器(Google Chrome)不支援小於12px字型?!其實在做前幾個項目的時候在測試瀏覽器安全色性的時候有發現過這個問題。當時沒有太在意,因為沒有錯亂的問題。今天由於在CSS設定的大小是10px,且父級DIV寬度也剛好只能容納10px大小的字型寬度。所以在Google瀏覽器裡就錯亂了。這還了得,不得被客戶劈死。得想辦法解決呐!正好前幾天加了個群 - WEB前端開發群3。於是乎在群裡吼了兩聲,立馬有高手回答,怕忘記就順便記錄下來。在此感謝群裡的大蝦們!

Google瀏覽器預設最小字型為12px,小於12px的字型它都以12px顯示,有時我們需要字型小點,特別是在製作英文網站時,所以很蛋疼。不過還是有解決方案的。看下面:

在html或者body裡添加一句Google瀏覽器專有的屬性。

<style>

html,body{

      -webkit-text-size-adjust:none;

}

</style>


注意:如果使用了這個屬性,瀏覽器的字型將不能使用放大縮小功能!(就是按住CTRL鍵上下滾動滑鼠中鍵的那功能)

Google Chrome和360瀏覽器下字型無法正常縮放大小

還有朋友說用em(字元)作為單位定義字型大小有用。本人親自測試過,用em字義的字型在Google瀏覽器中最小也不會小於12px。所以是沒用的。暫時我只知道上面一種方法,如果誰有其它方法記得分享哦。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.