同學們在前端開發(fā)的時候經(jīng)常會遇到一些莫名其妙的問題，比如今天小千給大家介紹的這個問題，谷歌瀏覽器的font boosting[Text Autosizer]，接著往下看。
問題
用谷歌瀏覽器的開發(fā)者工作測試移動端的一個demo，頁面中的文本在瀏覽器中顯示的大小和代碼中設置的大小有很大的區(qū)別，具體代碼如下：
效果如下：
根據(jù)以上代碼設置，p標簽中的文本大小是20px，但是在以上截圖中可以看出，p標簽在瀏覽器中顯示的文本大小是34px，為什么會比代碼設置的文本值差那么多呢？
經(jīng)過本人一頓查閱，了解到這是webkit給移動端瀏覽器提供的一個特性的Text Autosizer特性，也叫做Font Boosting-字體提升、Font Inflation-字體膨脹，這個特性的作用是：在手機上瀏覽網(wǎng)頁時，很可能因為原始頁面寬度較大，在手機屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字變大，可以讓用戶方便閱讀頁面中的文本。
什么情況會觸發(fā)Text Autosizer特性
（1）在默認視口980的情況下，頁面會在屏幕中縮小顯示，并且文本比較多的情況下，會觸發(fā)Text Autosizer；
如下展示，沒有設置視口大小，視口為默認的980px，p標簽根據(jù)代碼設置，文本大小為20px，但是在瀏覽器中顯示的大小為45.8886px
（2）設置頁面在視口中顯示時縮小顯示，并且文本比較多的情況下，會觸發(fā)Text Autosizer；
如下展示，設置頁面初次顯示時縮小為0.5，p標簽根據(jù)代碼設置，文本大小為20px，但是在瀏覽器中顯示的大小為34px
如果有以上情況，但是文本的量不都多，也是不會觸發(fā)此問題的，請知曉；
如何解決此問題
經(jīng)過前輩們的總結和本人的此時，總結出以下解決方法：
（1）在發(fā)生此問題的標簽上設置高度，如下：
頁面是設置了縮小的，文本的多少也沒有變化，但是給p加了height:100%，此時p顯示的文本大小就為20px了
（2）在發(fā)生此問題的標簽上設置max-height，如下：
頁面是設置了縮小的，文本的多少也沒有變化，但是給p加了max-height:300px，此時p顯示的文本大小就為20px了
最后想學習web前端的同學，可以參考千鋒web前端培訓班提供的web前端學習路線，該學習路線對從零基礎小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導，根據(jù)千鋒web前端培訓機構提供的web前端學習路線圖可以讓你對學習web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群：857920838 加群找群管理領取即可，等你來哦~~
京公網(wǎng)安備 11010802030320號