當(dāng)PageSpeed Insights檢測(cè)到網(wǎng)頁(yè)上的文字太小而難以辨認(rèn)時(shí)，就會(huì)觸發(fā)此規(guī)則。

概覽

您可以使用以下四種常用單位來(lái)指定網(wǎng)頁(yè)字體大?。合袼?px)、點(diǎn)(pt)、EM(em)和百分比(%)。

• 像素即“CSS像素”，會(huì)因設(shè)備尺寸和密度而異。
• 點(diǎn)是相對(duì)于像素而定義的。一個(gè)像素是0.75點(diǎn)^*。
• EM和百分比是“相對(duì)”單位：這兩個(gè)單位是相對(duì)于沿用已使用字體大小和屬性而言的。1 EM相當(dāng)于100%。

^*請(qǐng)參見(jiàn)其他說(shuō)明。

此外，視口會(huì)影響字體在移動(dòng)設(shè)備上的縮放方式。未適當(dāng)配置視口的網(wǎng)頁(yè)會(huì)在移動(dòng)設(shè)備上縮小顯示，這通常會(huì)導(dǎo)致網(wǎng)頁(yè)文字較小而難以辨認(rèn)。

建議

首先，配置視口以確保字體將會(huì)在各個(gè)設(shè)備中按預(yù)期縮放。配置視口后，請(qǐng)實(shí)施下面這些額外的建議：

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

例如，以下CSS代碼段定義了16 CSS像素的基準(zhǔn)字體大小，其中在CSS類(lèi)“small”中將字體大小定義為基準(zhǔn)字體大小的75%（即12 CSS像素），在CSS類(lèi)“large”中將字體大小定義為基準(zhǔn)字體大小的125%（即20 CSS像素）：

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

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

其他信息

請(qǐng)仔細(xì)閱讀CSS 2.1規(guī)范，以了解長(zhǎng)度單位的定義方式。該規(guī)范包含此處未提到的其他單位：英寸、厘米、毫米和皮卡。另外，有一點(diǎn)很容易被人忽略，那就是CSS中1英寸并不一定等于1物理英寸。

所有絕對(duì)單位都是相對(duì)于其他單位而定義的。1像素等于0.75點(diǎn)，1點(diǎn)等于1/72英寸，而1英寸等于2.54厘米等。不過(guò)，這些單位的“定位”最終都取決于設(shè)備。例如，在紙張上打印時(shí)，1英寸就會(huì)錨定為1物理英寸，其他所有單位應(yīng)相對(duì)于物理英寸而定。然而，在手機(jī)上顯示時(shí)，設(shè)備會(huì)根據(jù)著名的“參考像素”進(jìn)行錨定。您可以根據(jù)此參考像素定義1 CSS像素，然后以CSS像素為參考來(lái)調(diào)整其他所有單位（例如，英寸、厘米等）。因此，1 CSS英寸通常會(huì)以小于現(xiàn)實(shí)中1物理英寸的大小顯示在手機(jī)上。

鑒于這個(gè)原因，我們建議您使用像素定義字體大小。不然，某些設(shè)計(jì)人員和開(kāi)發(fā)者看到所用單位是英寸或點(diǎn)時(shí)可能會(huì)被誤導(dǎo)，因?yàn)檫@些單位盡管也是物理尺寸，但不一定等同于現(xiàn)實(shí)世界中的尺寸。請(qǐng)將像素想象成會(huì)根據(jù)所在設(shè)備的尺寸來(lái)變更顯示大小的單位。

最后，每種字體還具有自身的特征：大小、間距等。默認(rèn)情況下，瀏覽器將會(huì)以16像素（CSS像素）顯示每種字體。這個(gè)默認(rèn)設(shè)置適用于大部分情況，但某些特定字體可能需要再另外進(jìn)行調(diào)整，也就是說(shuō)，您可以設(shè)置較低或較高的默認(rèn)字體大小，以適應(yīng)字體的不同屬性。然后，待默認(rèn)大小設(shè)置完畢后，請(qǐng)根據(jù)默認(rèn)像素大小定義較大和較小的字體，以便調(diào)整網(wǎng)頁(yè)上主要、次要和其他類(lèi)型內(nèi)容的文字大小。

某些移動(dòng)瀏覽器可能會(huì)在沒(méi)有恰當(dāng)配置視口的情況下嘗試縮放網(wǎng)頁(yè)字體。由于這種縮放行為因?yàn)g覽器而異，因此您最好不要依賴(lài)這種方式來(lái)為移動(dòng)設(shè)備顯示清晰可辨的字體。PageSpeed Insights會(huì)照原樣顯示您網(wǎng)頁(yè)上的文字，而不會(huì)應(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 the Apache 2.0 License. For details, see our Site Policies.