Это правило срабатывает, когда PageSpeed Insights обнаруживает, что текст на веб-странице слишком мал для разборки.

概覽

Вы можете использовать следующие四種常用單位來指定網(wǎng)頁字體大小：像素(px)、點(pt)、EM(em)和百分比(%)。

• Пиксели, или ? пиксели CSS?, будут варьироваться в зависимости от размера и плотности устройства.
• 點是相對于像素而定義的。一個像素是0.75點^*。
• EM和百分比是“相對”單位：這兩個單位是相對于沿用已使用字體大小和屬性而言的。1 EM相當(dāng)于100%。

?

^*См. другие инструкции.

Кроме того,видовое отверстие會影響字體在移動設(shè)備上的縮放方式。未適當(dāng)配置視口的網(wǎng)頁會在移動設(shè)備上縮小顯示，這通常會導(dǎo)致網(wǎng)頁文字較小而難以辨認(rèn)。

建議

Во-первых,Настройка видового экрана以確保字體將會在各個設(shè)備中按預(yù)期縮放。配置視口后，請實施下面這些額外的建議：

?

1. 使用16 CSS像素的基準(zhǔn)字體大小。根據(jù)要使用的字體的屬性按需調(diào)整字體大小。
2. Используйте размер шрифта по отношению к базовому шрифту для определения масштаба набора.
3. Между символами в каждой строке текста должно быть отведено определенное вертикальное пространство, а также может потребоваться различная корректировка в зависимости от каждого шрифта. Мы обычно советуем вам использовать строку высотой 1,2 em по умолчанию в браузере.
4. Ограничите количество используемых шрифтов, а также пропорции набора: избыток шрифтов и размер шрифта могут привести к загромождению и излишней сложности макета веб-страницы.

Например, следующий сегмент кода CSS определяет размер базового шрифта в 16 пикселей CSS, где размер шрифта определяется как 75% от размера базового шрифта (т.е. 12 пикселей CSS) в классе CSS ? small ? и 125% от размера базового шрифта (т.е. 20 пикселей CSS) в классе CSS ? large?:

?

對于適用于移動設(shè)備的其他字體建議，請參閱Руководство по верстке Android.

其他信息

請仔細(xì)閱讀Спецификация CSS 2.1Для понимания того, как определяется единица длины. Спецификация содержит другие единицы, которые здесь не упомянуты: дюймы, сантиметры, миллиметры и пикапы. Кроме того, можно легко не заметить, что 1 дюйм в CSS не обязательно равен 1 физическому дюйму.

Все абсолютные единицы определяются по отношению к другим единицам. 1 пиксель равен 0,75 точки, 1 точка равен 1/72 дюйма, в то время как 1 дюйм равен 2,54 см и т. Д. Однако ? позиционирование ? этих агрегатов в конечном итоге зависит от оборудования. Например, при печати на бумаге 1 дюйм будет привязываться к 1 физическому дюйму, а все остальные единицы должны быть привязаны к физическому дюйму. Однако при отображении на телефоне устройство анкеруется по известным ? эталонным пикселям?. Вы можете определить 1 пиксель CSS в соответствии с этим эталонным пикселем, а затем использовать пиксель CSS в качестве эталона для регулировки всех остальных единиц (например, дюймов, сантиметров и т.д.). Таким образом, 1 CSS-дюйм обычно отображается на телефоне размером меньше 1 физического дюйма в реальности.

По этой причине мы рекомендуем использовать пиксели для определения размера шрифта. В противном случае некоторые проектировщики и разработчики могут быть введены в заблуждение, когда видят, что используемые единицы являются дюймами или точками, поскольку эти единицы, хотя и являются физическими размерами, не обязательно эквивалентны размерам в реальном мире. Представьте себе пиксели как единицы, которые изменяют размер дисплея в зависимости от размера устройства, на котором они расположены.

Наконец, каждый шрифт также имеет свои особенности: размер, шаг и т.д. По умолчанию браузер будет отображать каждый шрифт в 16 пикселей (пикселей CSS). Эта настройка по умолчанию применима к большинству случаев, но некоторые конкретные шрифты могут быть дополнительно скорректированы, то есть вы можете установить более низкий или более высокий размер шрифта по умолчанию, чтобы соответствовать различным свойствам шрифта. После того, как размер по умолчанию будет установлен, определите больший и меньший шрифт в соответствии с размером пикселя по умолчанию, чтобы изменить размер текста для основного, вторичного и других типов содержимого веб-страницы.

某些移動瀏覽器可能會在沒有恰當(dāng)配置視口的情況下嘗試縮放網(wǎng)頁字體。由于這種縮放行為因瀏覽器而異，因此您最好不要依賴這種方式來為移動設(shè)備顯示清晰可辨的字體。PageSpeed Insights會照原樣顯示您網(wǎng)頁上的文字，而不會應(yīng)用瀏覽器指定的字體縮放比例。

?

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 3.0 License, and code samples are licensed under theApache 2.0 License. For details, see our?Site Policies.