Font Boosting(字体放大)
1. 别名
- Text Autosizer(文本自调)
- Font Inflation(字体膨胀)
2. 现象
字体显示尺寸比CSS中指定尺寸大。Chrome自行放大页面字体的大小。
3. 案例
4. 原因
网上的解释:
当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。
无C++编程基础,可跳过下面内容,直接查看解决方式。
Chromium(开源版Chrome)的处理源代码如下所示:
multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);
if (originFontSize < 16) {
computedFontSize = originFontSize * multiplier;
}
else if (16 <= originFontSize <= (32 * multiplier - 16)) {
computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);
}
else if (originFontSize > (32 * multiplier - 16)) {
computedFontSize = originFontSize;
}
变量说明
|变量|作用|
|:-|
|originFontSize
|原始字体大小|
|computedFontSize
|经过计算后的字体大小|
|multiplier
|换算系数,值由以下几个值计算得到。|
|deviceScaleAdjustment
|当指定 viewport width=device-width 时此值为 1,否则值在 1.05 - 1.3 之间,有专门的计算规则。|
|textScalingSlider
|浏览器中手动指定的缩放比例,默认为 1|
|systemFontScale
|系统字体大小,Android设备可以在「设备 - 显示 - 字体大小」处设置,默认为 1|
|clusterWidth
|应用 Font Boosting 特性字体所在元素的宽度(如何确定这个元素请参考上边两个链接)|
|screenWidth
|设备屏幕分辨率(DIPs, Density-Independent Pixels),如 iPhone 5 为 320|
上面代码可知:
- 当
multiplier
大于1,并且originFontSize
小于(32 * multiplier - 16)
时,才会出现Font Boosting。 -
multiplier
大于1等价于deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth
大于1。 - 在初始页面,一般
deviceScaleAdjustment
、textScalingSlider
与systemFontScale
都是1,不影响最终结果,只要clusterWidth / screenWidth
大于1,就会出现Font Boosting。
5. 解决
- 方法一
在出现Font Boosting情况的元素CSS加上max-height:100%
即可。 - 方法二
给元素设置-webkit-text-size-adjust: none;
。