Font Boosting

2019年9月8日 120次阅读 来源: donny

Font Boosting

Font Boosting被称为字体提升，也被称为Text Autosizer，Font Inflation.是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。

我们先来看看现象：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test Font Boosting</title>
        <!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">-->
    </head>
    <body>
        <p style="font-size: 24px;">Test Font Boosting</p>
        <p style="font-size: 24px;">Test Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font BoostingTest Font Boosting</p>
    </body>
</html>

《Font Boosting》
该图片中显示的p元素font-size设置的是24px，实际现实的是47.5556px.
出现该特性的原因是因为：

  • 在移动端页面缩放情况下(initial-scale!=1)，chrome有可能重新调整字号；
  • 未限定尺寸的文本流中有效

解决方案

  • Font Boosting 仅在未限定尺寸的文本流中有效，给元素指定宽高，就可以避免 Font Boosting 被触发
  • 可通过指定max-height来避免触发。比如 .class {max-height:100%;}
  • .class{text-size-adjust:none;}
  • 指定initial-scale = 1
    原文作者：donny
    原文地址: https://segmentfault.com/a/1190000015234607
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞