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;。
