解决 “页面中文字增多，字号忽然变大” 的问题

在以前一篇文章中，曾记录过一个开发中遇到的问题，在页面中文字增长到必定数量，或者文字大小设置为某一个值时，页面中的文字字号会忽然变大，超出本身设置的字号大小。

以下图所示：

 

虽然我设置的字号大小是24px，可是在computed下倒是28.7px，超出我所设置的大小，那么问题来源是什么？

经高人指点后，该问题终于获得了解决，主要问题在于 Font Boosting 特性。

这个特性被称作「Text Autosizer」，又称「Font Boosting」、「Font Inflation」，是 Webkit 给移动端浏览器提供的一个特性：当咱们在手机上浏览网页时，

极可能由于原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在既不须要左右滑动屏幕，

也不须要双击放大屏幕内容的前提下，也可让人们方便的阅读页面中的文本。

下面给出几个解决方案：

1. 手动指定 viewport width=320，这时 Font Boosting 不会被触发。（后边能够知道，这个说法不严谨，在其余设置均为默认值时，这一条才有效）

2. Font Boosting 仅在未限定尺寸的文本流中有效，给元素指定宽高，就能够避免 Font Boosting 被触发。这也就解释了为何我在给元素设置高度之后，该问题便解决了。

3. 显然第 2 条方案是有缺陷的，文本内容不可能都指定宽高。不过能够经过指定 max-height 来解决。好比 body * { max-height: 999999px; } 就能够无反作用的禁掉 Font Boosting 特性。

    固然，我以为不必使用通用选择器，用相似 p { max-height: 999999px; } 可能更好一些。

那么浏览器是怎么计算字号并控制其大小的呢，下面是浏览器的计算逻辑：

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

问题终于获得解决啦，多谢高人指点，比心！

文章参考连接：https://github.com/amfe/article/issues/10