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

2024-05-27 00:28:36

很多人在前端开发的时候经常会遇到一些莫名其妙的问题，比如今天小千给大家介绍的这个问题，谷歌浏览器的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]相关推荐

前端技巧培训-后台战友快速入门
前端技巧培训-后台战友快速入门一.工具 webstorm/vscode node环境/npm (一般安装node自带安装npm的) 可以安装淘宝镜像(下载依赖包比较快) node安装教程淘宝镜像安 ...
突破常规的前端技巧与方法
文章目录一.代码整洁推荐 1.1 三元(三目)运算符 1.2 短路判断简写 1.3 变量声明简写 1.4 if真值判断简写 1.5 For循环简写 1.6 对象属性简写 1.7 箭头函数简写 1.8 ...
web前端技巧：如何在浏览器地址栏执行html代码
‍ 你知道吗?在非IE内核的浏览器地址栏可以直接运行HTML代码! 比如你在地址栏输入以下代码然后回车运行,会出现指定的页面内容.data:text/html,<h1>hello,baby ...
前端技巧总结---持续更新
易遗漏事件总结关闭/保存后重置一些变量.表单考虑业务流程加载数据提示移动端技巧总结阿里图库在原有的基础上加新图标该代码替换掉原有的 iconfont.css ❗src 请求头要加ht ...
web前端技巧-ES6新特性与重点知识汇总（三）
ES6的新特性到这里就是第三期了也是最后一期,今天我们将把剩余的几个ES6特性介绍完毕,希望能够给同学带来帮助,还是带好小本本我们开始了. 十三.Promise Promise 是异步编程的一种解决方 ...
web前端技巧-ES6新特性与重点知识汇总（二）
ES6框架的新特性我们今天再来介绍其他的一些,还是带好写本本做好笔记,我们马上开始. 七.扩展运算符扩展运算符(spread)是三个点(-).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔 ...
web前端技巧-ES6新特性与重点知识汇总（一）
前端开发使用ES6框架已经不是什么新鲜的事情了,现如今也有越来越多的同学选择使用它,但随着ES6的更新迭代,一些新的特性很多同学并不了解,今天小千就来给大家介绍一下,记得收藏一下啦. 一.ES6变量声 ...
web前端技巧-文本如何垂直居中？多行文本如何实现上下居中？
做前端开发的同学肯定对文本居中不陌生,但一般我们说的都是水平居中也就是左右居中,那么你想过没有如何实现垂直居中也就是上下居中吗?今天小千就来给大家介绍一下. 单行文字垂直居中-行高等于高度值上面的方 ...
Web前端技巧分享：教你用GD库生成验证码
验证码相信大家都不会陌生,在网站登录的时候经常会遇到.那么你知道这个验证码是如何实现的吗?下面小千就为大家介绍一下这个GD库,还有一些常见的图片水印也是用GD实现的哦! GD库是什么? GD库是php ...

最新文章

热门文章