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

最新推荐文章于 2023-12-20 13:54:21 发布

weixin_34124577

最新推荐文章于 2023-12-20 13:54:21 发布

阅读量164

点赞数

文章标签：人工智能移动开发

原文链接：https://segmentfault.com/a/1190000007177666

版权

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