Типографика имеет основополагающее значение для хорошего дизайна, брендинга, читаемости и доступности. Веб-шрифты позволяют реализовать все вышеперечисленное и многое другое: текст можно выделить, искать, масштабировать, и они совместимы с высоким разрешением (DPI), обеспечивая стабильное и четкое отображение текста независимо от размера и разрешения экрана. Веб-шрифты имеют решающее значение для хорошего дизайна, пользовательского опыта и производительности.
Оптимизация веб-шрифтов — важнейший элемент общей стратегии повышения производительности. Каждый шрифт — это дополнительный ресурс, и некоторые шрифты могут блокировать отрисовку текста, но тот факт, что страница использует веб-шрифты, не означает, что она должна отображаться медленнее. Напротив, оптимизированные шрифты в сочетании с продуманной стратегией их загрузки и применения на странице могут помочь уменьшить общий размер страницы и улучшить время её отрисовки.
Анатомия веб-шрифта
Веб-шрифт — это набор глифов, и каждый глиф представляет собой векторную фигуру, описывающую букву или символ. В результате размер файла шрифта определяется двумя простыми переменными: сложностью векторных путей каждого глифа и количеством глифов в конкретном шрифте. Например, Open Sans, один из самых популярных веб-шрифтов, содержит 897 глифов, включая латинские, греческие и кириллические символы.
При выборе шрифта важно учитывать, какие наборы символов поддерживаются. Если вам необходимо локализовать контент страницы на несколько языков, следует использовать шрифт, который обеспечит единообразный внешний вид и удобство использования для ваших пользователей. Например, семейство шрифтов Noto от Google стремится поддерживать все языки мира. Однако следует отметить, что общий размер Noto, включая все языки, составляет более 1,1 ГБ в ZIP-архиве.
В этой статье вы узнаете, как уменьшить размер файла, в который поставляются ваши веб-шрифты.
форматы веб-шрифтов
Сегодня в интернете используются два рекомендуемых формата контейнеров шрифтов:
WOFF и WOFF 2.0 пользуются широкой поддержкой и совместими со всеми современными браузерами.
- Предоставлять вариант WOFF 2.0 для современных браузеров.
- В случае крайней необходимости — например, если вам по-прежнему нужна поддержка Internet Explorer 11 — используйте WOFF-файл в качестве резервного варианта.
- В качестве альтернативы можно рассмотреть вариант отказа от использования веб-шрифтов в устаревших браузерах и перехода на системные шрифты. Это также может обеспечить более высокую производительность на старых, менее мощных устройствах.
- Поскольку форматы WOFF и WOFF 2.0 охватывают все аспекты современных и устаревших браузеров, использование EOT и TTF больше не требуется и может привести к увеличению времени загрузки веб-шрифтов.
Веб-шрифты и сжатие
И WOFF, и WOFF 2.0 имеют встроенную функцию сжатия. Встроенная функция сжатия WOFF 2.0 использует Brotli и обеспечивает до 30% более высокую степень сжатия, чем WOFF. Для получения дополнительной информации см. отчет об оценке WOFF 2.0 .
Наконец, стоит отметить, что некоторые форматы шрифтов содержат дополнительные метаданные, такие как информация о хинтинге и кернинге , которые могут быть не нужны на некоторых платформах, что позволяет дополнительно оптимизировать размер файла. Например, Google Fonts поддерживает более 30 оптимизированных вариантов для каждого шрифта и автоматически определяет и предоставляет оптимальный вариант для каждой платформы и браузера.
Задайте семейство шрифтов с помощью @font-face
Правило @font-face в CSS позволяет определить местоположение конкретного ресурса шрифта, его характеристики стиля и кодовые точки Unicode, для которых он должен использоваться. Комбинация таких объявлений @font-face может использоваться для создания «семейства шрифтов», которое браузер будет использовать для определения того, какие ресурсы шрифтов необходимо загрузить и применить к текущей странице.
Рассмотрим шрифт с изменяемым размером шрифта.
Использование вариативных шрифтов может значительно уменьшить размер файлов шрифтов в тех случаях, когда вам требуется несколько вариантов одного шрифта. Вместо загрузки обычного и жирного стилей, а также их курсивных версий, вы можете загрузить один файл, содержащий всю необходимую информацию. Однако размер файлов вариативных шрифтов будет больше, чем размер файла отдельного варианта шрифта, хотя и меньше, чем размер комбинации множества вариантов. Вместо одного большого файла вариативного шрифта, возможно, лучше сначала загрузить основные варианты шрифта, а остальные варианты — позже.
В настоящее время все современные браузеры поддерживают вариативные шрифты. Подробнее об этом можно узнать в разделе «Введение в вариативные шрифты в интернете» .
Выберите правильный формат
Каждое объявление @font-face содержит имя семейства шрифтов, которое представляет собой логическую группу из нескольких объявлений, свойства шрифта , такие как стиль, толщина и растяжение, а также дескриптор `src` , который задает приоритетный список местоположений для ресурса шрифта.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
/* Only serve WOFF if necessary. Otherwise,
WOFF 2.0 is fine by itself. */
url('/fonts/awesome.woff') format('woff');
}
@font-face {
font-family: 'Awesome Font';