Используйте разборчивый размер шрифта

On this page

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

概览

Вы можете использовать следующие四种常用单位来指定网页字体大小：像素(px)、点(pt)、EM(em)和百分比(%)。

  • Пиксели, или « пиксели CSS», будут варьироваться в зависимости от размера и плотности устройства.
  • 点是相对于像素而定义的。一个像素是0.75点*。
  • EM和百分比是“相对”单位：这两个单位是相对于沿用已使用字体大小和属性而言的。1 EM相当于100%。

 

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

Кроме того,видовое отверстие会影响字体在移动设备上的缩放方式。未适当配置视口的网页会在移动设备上缩小显示，这通常会导致网页文字较小而难以辨认。

建议

Во-первых,Настройка видового экрана以确保字体将会在各个设备中按预期缩放。配置视口后，请实施下面这些额外的建议：

 

  1. 使用16 CSS像素的基准字体大小。根据要使用的字体的属性按需调整字体大小。
  2. Используйте размер шрифта по отношению к базовому шрифту для определения масштаба набора.
  3. Между символами в каждой строке текста должно быть отведено определенное вертикальное пространство, а также может потребоваться различная корректировка в зависимости от каждого шрифта. Мы обычно советуем вам использовать строку высотой 1,2 em по умолчанию в браузере.
  4. Ограничите количество используемых шрифтов, а также пропорции набора: избыток шрифтов и размер шрифта могут привести к загромождению и излишней сложности макета веб-страницы.

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

body { font-size: 16px; } .small { font-size: 12px; /* 75% of the baseline */ } .large { font-size: 20px; /* 125% of the baseline */ }

 

对于适用于移动设备的其他字体建议，请参阅Руководство по верстке Android.

其他信息

请仔细阅读Спецификация 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). Эта настройка по умолчанию применима к большинству случаев, но некоторые конкретные шрифты могут быть дополнительно скорректированы, то есть вы можете установить более низкий или более высокий размер шрифта по умолчанию, чтобы соответствовать различным свойствам шрифта. После того, как размер по умолчанию будет установлен, определите больший и меньший шрифт в соответствии с размером пикселя по умолчанию, чтобы изменить размер текста для основного, вторичного и других типов содержимого веб-страницы.

某些移动浏览器可能会在没有恰当配置视口的情况下尝试缩放网页字体。由于这种缩放行为因浏览器而异，因此您最好不要依赖这种方式来为移动设备显示清晰可辨的字体。PageSpeed Insights会照原样显示您网页上的文字，而不会应用浏览器指定的字体缩放比例。

 

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.