PageSpeed Insights может выдать сообщение "Используйте шрифты легко читаемого размера" если обнаружит, что на странице есть текст слишком маленького размера.
Масштабирование шрифтов на мобильных устройствах зависит от области просмотра. Если область просмотра настроена неправильно, масштаб страницы при отображении на мобильных устройствах уменьшается, и текст становится мелким и неразборчивым.
Поэтому, в первую очередь, необходимо настроить область просмотра, чтобы обеспечить корректное масштабирование шрифтов на разных устройствах.
Не все единицы измерения подходят для работы с шрифтами. Пиксели (px) зависят от размера и плотности экрана устройства. Точки зависят от размера пикселей. Единицы em, ex и проценты являются относительными величинами, зависящими от унаследованного размера и свойств используемого шрифта.
Для правильного масштабирования шрифтов необходимо выполнить следующие рекомендации:
Поэтому, чтобы страница выглядела одинаково у всех пользователей, принято использовать несколько форматов одновременно:
Если вы не можете передавать шрифты со своего сервера и подключаете шрифты из CDN, то воспользуйтесь Web Font Loader. Сразу же начните отрисовывать текст в запасной версии шрифта и подгружайте шрифты асинхронно. Для этого можно применять loadCSS.
Кроме того, шрифты можно сжимать. Например формат WOFF применяет встроенное сжатие.
Масштабирование шрифтов на мобильных устройствах зависит от области просмотра. Если область просмотра настроена неправильно, масштаб страницы при отображении на мобильных устройствах уменьшается, и текст становится мелким и неразборчивым.
Поэтому, в первую очередь, необходимо настроить область просмотра, чтобы обеспечить корректное масштабирование шрифтов на разных устройствах.
Не все единицы измерения подходят для работы с шрифтами. Пиксели (px) зависят от размера и плотности экрана устройства. Точки зависят от размера пикселей. Единицы em, ex и проценты являются относительными величинами, зависящими от унаследованного размера и свойств используемого шрифта.
Для правильного масштабирования шрифтов необходимо выполнить следующие рекомендации:
- В качестве базового размера шрифта задайте 16 пикселей (px). При необходимости измените размер в зависимости от свойств используемого шрифта.
- Задайте прочие размеры относительно базового (em, ex), чтобы создать типографический масштаб.
- Между строками текста должен быть промежуток, который, возможно, придется задать для каждого шрифта. Чаще всего следует использовать высоту строки по умолчанию, равную 1,2 em.
- Ограничьте число шрифтов и используемых размеров: их избыток может привести к чрезмерной сложности страницы.
body {
font-size: 16px;
}
.small {
font-size: 12px; /* 75% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}Форматы шрифтов
Сегодня наиболее популярны следующие форматы контейнеров шрифтов: EOT, TTF (OTF), WOFF и WOFF2. К сожалению, не существует единого формата, который работает во всех браузерах. Например, EOT доступен только в IE, TTF поддерживается в этом браузере только частично. WOFF распространен больше других форматов, однако его нельзя использовать в некоторых старых браузерах, а WOFF 2.0 еще не поддерживается некоторыми браузерами.Поэтому, чтобы страница выглядела одинаково у всех пользователей, принято использовать несколько форматов одновременно:
- WOFF 2.0 используется в тех браузерах, которые его поддерживают.
- WOFF используется для большинства браузеров.
- OTF (не TTF) можно использовать для устаревших браузеров Android (для версий до 4.4).
- EOT используется для поддержки устаревших версий IE (до IE9).
Но если учесть, что на данный момент подавляющее большинство браузеров поддерживают формат WOFF, то можно отказаться от использования других форматов.
Оптимизация отрисовки шрифтов с помощью Font Loading API
С помощью интерфейса Font Loading API можно определить CSS-начертание веб-шрифта, отслеживать процесс скачивания и менять исходные настройки отложенной загрузки. Например, если мы уверены, что потребуется какой-либо вариант шрифта, мы можем указать это и настроить в браузере немедленное скачивание этого ресурса.
var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});
font.load(); // don't wait for render tree, initiate immediate fetch!
font.ready().then(function() {
// apply the font (which may rerender text and cause a page reflow)
// once the font has finished downloading
document.fonts.add(font);
document.body.style.fontFamily = "Awesome Font, serif";Если вы не можете передавать шрифты со своего сервера и подключаете шрифты из CDN, то воспользуйтесь Web Font Loader. Сразу же начните отрисовывать текст в запасной версии шрифта и подгружайте шрифты асинхронно. Для этого можно применять loadCSS.
Кеширование и сжатие
Шрифты - это статичные ресурсы не маленького объема, которые редко обновляются. Поэтому нужно убедится, что для шрифтов сервер отправляет директиву max-age с максимально долгим периодом. Благодаря этому шрифт может использоваться повторно на разных страницах без повторной загрузки.Кроме того, шрифты можно сжимать. Например формат WOFF применяет встроенное сжатие.
Комментарии
Отправить комментарий