解決 「頁面中文字增多，字號忽然變大」 的問題

在以前一篇文章中，曾記錄過一個開發中遇到的問題，在頁面中文字增長到必定數量，或者文字大小設置爲某一個值時，頁面中的文字字號會忽然變大，超出本身設置的字號大小。

以下圖所示：

 

雖然我設置的字號大小是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