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>
该图片中显示的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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。