很多人在前端開發的時候經常會遇到一些莫名其妙的問題，比如今天小千給大家介紹的這個問題，谷歌瀏覽器的font boosting[Text Autosizer]，接著往下看。

問題

用谷歌瀏覽器的開發者工作測試移動端的一個demo，頁面中的文本在瀏覽器中顯示的大小和代碼中設置的大小有很大的區別，具體代碼如下：

效果如下：

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

經過本人一頓查閱，了解到這是webkit給移動端瀏覽器提供的一個特性的Text Autosizer特性，也叫做Font Boosting-字體提升、Font Inflation-字體膨脹，這個特性的作用是：在手機上瀏覽網頁時，很可能因為原始頁面寬度較大，在手機屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字變大，可以讓用戶方便閱讀頁面中的文本。

什么情況會觸發Text Autosizer特性？

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

如下展示，沒有設置視口大小，視口為默認的980px，p標簽根據代碼設置，文本大小為20px，但是在瀏覽器中顯示的大小為45.8886px

（2）設置頁面在視口中顯示時縮小顯示，并且文本比較多的情況下，會觸發Text Autosizer；

如下展示，設置頁面初次顯示時縮小為0.5，p標簽根據代碼設置，文本大小為20px，但是在瀏覽器中顯示的大小為34px

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

如何解決此問題

經過前輩們的總結和本人的此時，總結出以下解決方法：

（1）在發生此問題的標簽上設置高度，如下：

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

（2）在發生此問題的標簽上設置max-height，如下：

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

以上的分享希望對大家有所幫助。想了解更多前端技巧，歡迎關注我喲！

總結

以上是生活随笔為你收集整理的前端技巧：谷歌浏览器的font boosting[Text Autosizer]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。