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