前端技巧：谷歌浏览器的font boosting[Text Autosizer]

大家在前端开发的时候经常会遇到一些莫名其妙的问题，比如今天小千给大家介绍的这个问题，谷歌浏览器的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,浏览器,Autosizer,Text,设置,boosting,文本,页面
来源： https://blog.51cto.com/15128702/2656782