同學(xué)們在前端開發(fā)的時(shí)候經(jīng)常會(huì)遇到一些莫名其妙的問題，比如今天小千給大家介紹的這個(gè)問題，谷歌瀏覽器的font boosting[Text Autosizer]，接著往下看。

      問題

      用谷歌瀏覽器的開發(fā)者工作測試移動(dòng)端的一個(gè)demo，頁面中的文本在瀏覽器中顯示的大小和代碼中設(shè)置的大小有很大的區(qū)別，具體代碼如下：

      效果如下：

      根據(jù)以上代碼設(shè)置，p標(biāo)簽中的文本大小是20px，但是在以上截圖中可以看出，p標(biāo)簽在瀏覽器中顯示的文本大小是34px，為什么會(huì)比代碼設(shè)置的文本值差那么多呢？

      經(jīng)過本人一頓查閱，了解到這是webkit給移動(dòng)端瀏覽器提供的一個(gè)特性的Text Autosizer特性，也叫做Font Boosting-字體提升、Font Inflation-字體膨脹，這個(gè)特性的作用是：在手機(jī)上瀏覽網(wǎng)頁時(shí)，很可能因?yàn)樵柬撁鎸挾容^大，在手機(jī)屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時(shí)會(huì)自動(dòng)將其中的文字變大，可以讓用戶方便閱讀頁面中的文本。

      什么情況會(huì)觸發(fā)Text Autosizer特性

      （1）在默認(rèn)視口980的情況下，頁面會(huì)在屏幕中縮小顯示，并且文本比較多的情況下，會(huì)觸發(fā)Text Autosizer；

      如下展示，沒有設(shè)置視口大小，視口為默認(rèn)的980px，p標(biāo)簽根據(jù)代碼設(shè)置，文本大小為20px，但是在瀏覽器中顯示的大小為45.8886px

      （2）設(shè)置頁面在視口中顯示時(shí)縮小顯示，并且文本比較多的情況下，會(huì)觸發(fā)Text Autosizer；

      如下展示，設(shè)置頁面初次顯示時(shí)縮小為0.5，p標(biāo)簽根據(jù)代碼設(shè)置，文本大小為20px，但是在瀏覽器中顯示的大小為34px

      如果有以上情況，但是文本的量不都多，也是不會(huì)觸發(fā)此問題的，請知曉；

      如何解決此問題

      經(jīng)過前輩們的總結(jié)和本人的此時(shí)，總結(jié)出以下解決方法：

      （1）在發(fā)生此問題的標(biāo)簽上設(shè)置高度，如下：

      頁面是設(shè)置了縮小的，文本的多少也沒有變化，但是給p加了height:100%，此時(shí)p顯示的文本大小就為20px了

      （2）在發(fā)生此問題的標(biāo)簽上設(shè)置max-height，如下：

      頁面是設(shè)置了縮小的，文本的多少也沒有變化，但是給p加了max-height:300px，此時(shí)p顯示的文本大小就為20px了

      最后想學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對(duì)從零基礎(chǔ)小白到web前端初級(jí)開發(fā)工程師，web前端高級(jí)開發(fā)工程師，后面的web前端大神級(jí)開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對(duì)學(xué)習(xí)web前端開發(fā)需要掌握的知識(shí)有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~