最近在做一個手機端頁面時，遇到了一個奇怪的問題：字體的顯示大小，與在CSS中指定的大小不一致。大家可以查看這個 Demo （記得打開Chrome DevTools）。

就如上圖所示，你可以發(fā)現(xiàn)，原本指定的字體大小是24px，但是最終計算出來的卻是53px，看到這詭異的結(jié)果，我心中暗罵一句：這什么鬼！

隨后開始對問題各種排查：某個標簽引起的？某個CSS引起的？又或者是某句JS代碼引起的。通過一坨坨的刪代碼，發(fā)現(xiàn)貌似都不是。我不禁又罵，到底什么鬼！不過中間還是發(fā)現(xiàn)了一些端倪：當(dāng)頁面中的標簽數(shù)量或者文本數(shù)量大于某一個值，或者當(dāng)CSS定義的字體大小落在某個區(qū)間時，這個問題才會被觸發(fā)。而且字體變大后的值也隨著原始定義的字體大小而改變。

然后自然就是各種搜索，終于有了新的發(fā)現(xiàn)。原來這個特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，是 Webkit 給移動端瀏覽器提供的一個特性：當(dāng)我們在手機上瀏覽網(wǎng)頁時，很可能因為原始頁面寬度較大，在手機屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內(nèi)容的前提下，也可以讓人們方便的閱讀頁面中的文本。

不過這個特性并不總是有必要的，還好在查到問題原因的同時，大家也討論了對這個問題的一些處理方案：

1. 手動指定 viewport width=320 ，這時 Font Boosting 不會被觸發(fā)。（后邊可以知道，這個說法不嚴謹，在其他設(shè)置均為默認值時，這一條才有效）
2. Font Boosting 僅在未限定尺寸的文本流中有效，給元素指定寬高，就可以避免 Font Boosting 被觸發(fā)。
3. 顯然第 2 條方案是有缺陷的，文本內(nèi)容不可能都指定寬高。不過還好，我們通過指定 max-height , min-height , min-width , max-width （經(jīng)@Ovaldi 指正，只有 max-height 有效） 也是可以的。比如 body * { max-height: 999999px; } 就可以無副作用的禁掉 Font Boosting 特性。當(dāng)然，我覺得沒必要使用通用選擇器，用類似 p { max-height: 999999px; } 可能更好一些。

到這里，我們已經(jīng)明白問題所在，并且也有解決方案了。但是有一個問題仍然困擾著我：當(dāng)字體大于某一個值時（比如當(dāng)不指定viewport width，手機屏幕width=320，字體大于等于82px時），這個 Font Boosting 就始終不會被觸發(fā)。Chrome 是如何計算的，這其中的邏輯又是什么？

這一次問題解決起來就沒有那么容易了，我先是各種搜索無果，然后自己人肉去試，慢慢找規(guī)律，但是發(fā)現(xiàn)變化不是線性的，看來這個公式還比較復(fù)雜。終于在今天被我發(fā)現(xiàn)了這篇文章： Chromium's Text Autosizer ，徹底解釋了我的疑問。

Font Boosting 具體的實現(xiàn)代碼在 TextAutosizer.cpp 這個文件中可以看到，有興趣的可以翻一下。

簡單說來，F(xiàn)ont Boosting 的計算規(guī)則偽代碼如下：

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 : 經(jīng)過計算后的字體大小
• multiplier : 換算系數(shù)，值由以下幾個值計算得到
  • deviceScaleAdjustment : 當(dāng)指定 viewport width=device-width 時此值為 1，否則值在 1.05 - 1.3 之間，有專門的計算規(guī)則
  • textScalingSlider : 瀏覽器中手動指定的縮放比例，默認為 1
  • systemFontScale : 系統(tǒng)字體大小，Android設(shè)備可以在「設(shè)備 - 顯示 - 字體大小」處設(shè)置，默認為 1
  • clusterWidth : 應(yīng)用 Font Boosting 特性字體所在元素的寬度（如何確定這個元素請參考上邊兩個鏈接）
  • screenWidth : 設(shè)備屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 為 320

說了這么多，貌似只需要記住 p { max-height: 999999px; } 就OK了。。。-_-!!!

Ref.

1. Webkit Bug 84186 Webkit Bugs 上記錄的這個問題，最早從 2012 年 4 月份就開始討論這個問題了，但好像都沒有引起我們的任何關(guān)注。
2. Chromium's Text Autosizer 關(guān)于 Font Boosting 最重要的一篇文章，更確切的說是論文。
3. Font boosting in mobile browsers
4. Font Boosting 一個俄國人用英文寫的文章。
5. 一堆 StackOverflow 上的問答，用 Font Boosting 搜可以出來一大坨，這里就不列了。