webkit内核下，字号会自动放大的问题

blog
github

问题描述

有时候在做移动端页面的时候，会发现某些字体会自动放大（而页面中另一部分却是对的- -），放大的比例看上去还没啥规律，很是诡异。

一探究竟

网上一通搜索，还真搜出来了。

首先，这个不是bug，是Chromium内核提高移动端文本可读性的一个特性，叫做这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，具体可以见这个文档Chromium’s Text Autosizer，计算规则则可以在这里看到TextAutosizer.cpp,在文档里可以看到计算公式如下

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

解决问题

其实嘛，解决起来还是容易的~

给元素指定宽高

试了下给元素单独设置width或height或max-height即可禁用Text Autosizer

使用-webkit-text-size-adjust

给元素设置 -webkit-text-size-adjust: none;可禁用Text Autosizer，这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。

参考资料

flexible.js字体大小诡异现象解析及解决方案

网页字体缩放样式-webkit-text-size-adjust的用法详解

以上。

new game！