04_Font Boosting

什麼是Font Boosting

Font Boosting是Webkit 給移動端瀏覽器提供的一個特性：
當我們在手機上瀏覽網頁時，很可能因爲原始頁面寬度較大，
在手機屏幕上縮小後就看不清其中的文字了。
而 Font Boosting 特性在這時會自動將其中的文字字體變大，
保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內容的前提下，
也可以讓人們方便的閱讀頁面中的文本。

Font Boosting 的計算規則僞代碼如下：

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

Font Boosting 僅在未限定尺寸的文本流中有效，給元素指定寬高，就可以避免 Font Boosting 被觸發。
但是文本內容不可能都指定寬高。不過還好，我們通過指定 max-height 就可以無副作用的禁掉 Font Boosting 特性。
用類似 p { max-height: 999999px; } 的方式來處理