千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业
当前位置:首页  >  关于学院  >  技术干货  > 前端技巧|谷歌浏览器的font boosting[Text Autosizer]

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

来源:千锋教育
发布人:小千
时间: 2021-03-05 08:54:00 1614905640

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

      问题

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

1

      效果如下:

2

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

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

3

4

      什么情况会触发Text Autosizer特性

      (1)在默认视口980的情况下,页面会在屏幕中缩小显示,并且文本比较多的情况下,会触发Text Autosizer;

      如下展示,没有设置视口大小,视口为默认的980px,p标签根据代码设置,文本大小为20px,但是在浏览器中显示的大小为45.8886px

5

      (2)设置页面在视口中显示时缩小显示,并且文本比较多的情况下,会触发Text Autosizer;

      如下展示,设置页面初次显示时缩小为0.5,p标签根据代码设置,文本大小为20px,但是在浏览器中显示的大小为34px

6

      如果有以上情况,但是文本的量不都多,也是不会触发此问题的,请知晓;

      如何解决此问题

      经过前辈们的总结和本人的此时,总结出以下解决方法:

      (1)在发生此问题的标签上设置高度,如下:

      页面是设置了缩小的,文本的多少也没有变化,但是给p加了height:100%,此时p显示的文本大小就为20px了

7

      (2)在发生此问题的标签上设置max-height,如下:

      页面是设置了缩小的,文本的多少也没有变化,但是给p加了max-height:300px,此时p显示的文本大小就为20px了

8

      最后想学习web前端的同学,可以参考千锋web前端培训班提供的web前端学习路线,该学习路线对从零基础小白到web前端初级开发工程师,web前端高级开发工程师,后面的web前端大神级开发工程师都有一个明确清晰的指导,根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解,并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群:857920838  加群找群管理领取即可,等你来哦~~

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区