當(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 (%).

• 像素即“CSS像素”，會因設(shè)備尺寸和密度而異。
• 點(diǎn)是相對于像素而定義的。一個像素是0.75點(diǎn)^*.
• EM and Percentage are "relative" units: These are relative to the use of font sizes and attributes. 1 EM equates to 100%.

?

^*請參見其他說明。

此外，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:

?

1. 使用16 CSS像素的基準(zhǔn)字體大小。根據(jù)要使用的字體的屬性按需調(diào)整字體大小。
2. 使用相對于基準(zhǔn)字體的字體大小定義排版比例。
3. 每行文字的字符之間需要留出一定的垂直空間，而且還可能需要根據(jù)每種字體進(jìn)行不同的調(diào)整。我們通常建議您使用瀏覽器默認(rèn)的行高1.2em。
4. 限制所用字體的數(shù)量以及排版比例：過多字體和字體大小會導(dǎo)致網(wǎng)頁布局雜亂且過于復(fù)雜。

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":

?

對于適用于移動設(shè)備的其他字體建議，請參閱Android排版指南。

Other information

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.