當(dāng)PageSpeed Insights檢測到網(wǎng)頁上的文字太小而難以辨認(rèn)時,就會觸發(fā)此規(guī)則。
You can use the followingFour commonly used unitsTo specify the page font size: pixels (px), dots (pt), em (em), and percentages (%).
?
*請參見其他說明。
此外,ViewportWill affect how fonts are scaled on mobile devices. Web pages that do not have a properly configured viewport will be scaled down on mobile devices, which often results in small and illegible text on the page.
首先,Configure ViewportTo ensure that the font will be scaled as expected in each device. After configuring the viewport, implement the following additional recommendations:
?
For example, the following CSS code snippet defines a baseline font size of 16 CSS pixels, where the font size is defined as 75% of the baseline font size (i.e. 12 CSS pixels) in the CSS class "small" and 125% of the baseline font size (i.e. 20 CSS pixels) in the CSS class "large":
body {
font-size: 16px;
}
.small {
font-size: 12px; /* 75% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}
?
對于適用于移動設(shè)備的其他字體建議,請參閱Android排版指南。
Please read it carefullyCSS 2.1規(guī)范,以了解長度單位的定義方式。該規(guī)范包含此處未提到的其他單位:英寸、厘米、毫米和皮卡。另外,有一點(diǎn)很容易被人忽略,那就是CSS中1英寸并不一定等于1物理英寸。
所有絕對單位都是相對于其他單位而定義的。1像素等于0.75點(diǎn),1點(diǎn)等于1/72英寸,而1英寸等于2.54厘米等。不過,這些單位的“定位”最終都取決于設(shè)備。例如,在紙張上打印時,1英寸就會錨定為1物理英寸,其他所有單位應(yīng)相對于物理英寸而定。然而,在手機(jī)上顯示時,設(shè)備會根據(jù)著名的“參考像素”進(jìn)行錨定。您可以根據(jù)此參考像素定義1 CSS像素,然后以CSS像素為參考來調(diào)整其他所有單位(例如,英寸、厘米等)。因此,1 CSS英寸通常會以小于現(xiàn)實(shí)中1物理英寸的大小顯示在手機(jī)上。
For this reason, we recommend that you use pixels to define the font size. Otherwise, some designers and developers may be misled to see that the units used are inches or dots, because although these units are also physical dimensions, they are not necessarily equivalent to real-world dimensions. Think of pixels as units that change the display size according to the size of your device.
Finally, each font has its own characteristics: size, spacing and so on. By default, the browser will display each font in 16 pixels (CSS pixels). This default setting works for most situations, but some specific fonts may need to be adjusted additionally, that is, you can set a lower or higher default font size to suit different font properties. Then, after the default size is set, define larger and smaller fonts based on the default pixel size to adjust the text size of major, minor, and other types of content on the Web page.
某些移動瀏覽器可能會在沒有恰當(dāng)配置視口的情況下嘗試縮放網(wǎng)頁字體。由于這種縮放行為因?yàn)g覽器而異,因此您最好不要依賴這種方式來為移動設(shè)備顯示清晰可辨的字體。PageSpeed Insights會照原樣顯示您網(wǎng)頁上的文字,而不會應(yīng)用瀏覽器指定的字體縮放比例。
?
Except as otherwise noted, the content of this page is licensed under the?Creative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see our?Site Policies.