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

很多人在前端开发的时候经常会遇到一些莫名其妙的问题，比如今天小千给大家介绍的这个问题，谷歌浏览器的font boosting[Text Autosizer]，接着往下看。

问题

用谷歌浏览器的开发者工作测试移动端的一个demo，页面中的文本在浏览器中显示的大小和代码中设置的大小有很大的区别，具体代码如下：

效果如下：

根据以上代码设置，p标签中的文本大小是20px，但是在以上截图中可以看出，p标签在浏览器中显示的文本大小是34px，为什么会比代码设置的文本值差那么多呢？

经过本人一顿查阅，了解到这是webkit给移动端浏览器提供的一个特性的Text Autosizer特性，也叫做Font Boosting-字体提升、Font Inflation-字体膨胀，这个特性的作用是：在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字变大，可以让用户方便阅读页面中的文本。