Font Boosting(字體放大)
1. 別名
- Text Autosizer(文本自調(diào))
- Font Inflation(字體膨脹)
2. 現(xiàn)象
字體顯示尺寸比CSS中指定尺寸大。Chrome自行放大頁面字體的大小。
3. 案例
4. 原因
網(wǎng)上的解釋：
當(dāng)我們在手機(jī)上瀏覽網(wǎng)頁時(shí)，很可能因?yàn)樵柬撁鎸挾容^大，在手機(jī)屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時(shí)會(huì)自動(dòng)將其中的文字字體變大，保證在即不需要左右滑動(dòng)屏幕，也不需要雙擊放大屏幕內(nèi)容的前提下，也可以讓人們方便的閱讀頁面中的文本。
無C++編程基礎(chǔ)，可跳過下面內(nèi)容，直接查看解決方式。
Chromium(開源版Chrome)的處理源代碼如下所示：
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)過計(jì)算后的字體大小|
|multiplier|換算系數(shù)，值由以下幾個(gè)值計(jì)算得到。|
|deviceScaleAdjustment|當(dāng)指定 viewport width=device-width 時(shí)此值為 1，否則值在 1.05 - 1.3 之間，有專門的計(jì)算規(guī)則。|
|textScalingSlider|瀏覽器中手動(dòng)指定的縮放比例，默認(rèn)為 1|
|systemFontScale|系統(tǒng)字體大小，Android設(shè)備可以在「設(shè)備 - 顯示 - 字體大小」處設(shè)置，默認(rèn)為 1|
|clusterWidth|應(yīng)用 Font Boosting 特性字體所在元素的寬度（如何確定這個(gè)元素請參考上邊兩個(gè)鏈接）|
|screenWidth|設(shè)備屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 為 320|
上面代碼可知:
- 當(dāng)
multiplier大于1，并且originFontSize小于(32 * multiplier - 16)時(shí)，才會(huì)出現(xiàn)Font Boosting。 -
multiplier大于1等價(jià)于deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth大于1。 - 在初始頁面，一般
deviceScaleAdjustment、textScalingSlider與systemFontScale都是1，不影響最終結(jié)果，只要clusterWidth / screenWidth大于1，就會(huì)出現(xiàn)Font Boosting。
5. 解決
- 方法一
在出現(xiàn)Font Boosting情況的元素CSS加上max-height:100%即可。 - 方法二
給元素設(shè)置-webkit-text-size-adjust: none;。
