Шрифты в Вебе

Термины

Для полного понимания статьи я приведу ряд наиболее трудных понятий.

Гарнитура — начертание шрифта т.е. его рисунок. Гарнитурой является весь диапазон начертаний шрифта «Helvetica». Чаще всего говорят шрифт подразумевая гарнитуру.

Глиф — один рисунок символа.

FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще.

FOUT (Flash of Unstyled Text) — букв. «мелькание не оформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным).

FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив», чуть подробнее о них здесь).

Для того что-бы визуально понять различия FOUT и FOIT рекомендую перейдите по ссылке на демо-страницу.

Введение

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

Основная часть информации была взята у человека, который посвятил изучению этого вопроса много времени Zach Leatherman, он ведет свой блог и делится полезной информацией.

Я считаю устаревшей легендарную статью Bulletproof @font-face Syntax, которая применяется сейчас повсеместно , она с избытком поддерживает все устаревшие браузеры.

Я за прогрессивный подход и придерживаюсь мнения, что нужно пользоваться 2-мя форматами шрифтов, которых хватит на долгое время, это WOFF2, WOFF, разработанные компанией Mozill. Также, по моему мнению, следует исключить все остальные расширения за ненадобностью. Сейчас эти форматы поддерживаются всеми современными браузерами и они отлично справляются со своей задачей.

Почему именно эти 2 формата? Они имеют маленький вес и поддерживают параметры шрифта, используемые в свойстве font-feauter-settings, о которой мы поговорим чуть позже.

• svg — формат самый объемный из всех, в 2–3 раза тяжелее остальных форматов и поддерживается только старыми safari.
• eot — формат поддерживается только старыми IE и также много весят.
• ttf — устаревший формат относительно много весит и зависит от OC.
• woff — формат разработанный компанией Mozilla, имеет меньший вес, но также поддерживает настройки.
• woff2 — аналогичен формату woff, но легче примерно на 30%.

Варианты подключения шрифта

1. В HTML через тег <link>
2. В CSS через директиву @import
3. В CSS через директиву @font-face
4. В CSS через base64 — как правило оно весит больше чем файл со шрифтом. Не рекомендую использовать, если конечно не горит.

Тег <link>

Очень популярный метод подключения шрифта благодаря сервису от googleGoogle Font.

Основные плюсы:

• Возможно данный шрифт будет в кеше пользователя
• CDN от google
• Быстрая загрузка до CSS

Основные минусы:

• Загружается в любом случае, даже если не используется на странице
• Создает дополнительные подключения к другим ресурсам
• Не использует свойство font-display, которое между прочем требуют Page speed и lighthous.

Подключение через директиву @import

Мало используемый способ подключения шрифта за счет медленной работы данной директивы. Избегайте его использования, даже при подключении других css файлов.

Подключение шрифта через директиву import заставляет шрифт ждать пока загрузится файл в котором он подключен:

Подключение через link загружает все асинхронно:

Основная проблема директивы import при подключении файлов стилей один в один:

Директива @font-face

Директива @font-faceпозволяет гибко настроить подключаемый шрифт. Не является самой быстрой т.к. создает еще один запрос. Браузеры могут загружать файл при условии, что используется хотя бы один глиф из данного шрифта. Каждый файл шрифта подключается через отдельную директиву @font-face со своими дескрипторами.

Состоит из:

• font-family - произвольное название для подключаемого шрифта, которое будет использоваться. Это может быть как оригинальное название шрифта, так и произвольное что-то в роде ‘header’ или ‘body’
• src - путь к файлам шрифта. Можно указать несколько вариантов через запятую. Содержит 2 функции: url()- подключает файл из указанного адреса и local()- содержит название шрифта без зависимости от регистра поиск, которое осуществляется на устройстве пользователя. Таким образом можно сначала указать local() для поиска на устройстве, а затем url(), который сработает при условии, что local() не будет найден. После url()можно указать функцию format() - показывает браузеру формат подключаемого шрифта, и если браузер не понимает указанный формат, то он не будет его загружать. Если же не указывать функцию format(), то браузер будет загружать все шрифты пока не найдет тот который поймет.
• font-style, font-weight, font-stretch - стили при которых будет показываться шрифт т.е если указать font-style: italic то он и будет загружаться, если для текста стоит свойство font-style: italiс независимо какое начертание подключается. Под italic можно загрузить реальный bold.
• unicode-range - диапазон глифов для загрузки. Многие шрифты содержат бесконечное количество глифов для разных языков. Чтобы все это не загружать можно указать диапазон глифов для загрузки. Также можно загрузить всего один глиф, и нам ничто не мешает собрать из нескольких шрифтов свой один. Варианты необходимых глифов и выбор диапазона можно узнать на сайте Unicode-table
• font-feature-settings - современные форматы шрифтов поддерживают некоторые параметры для настройки отображения, которыми можно управлять. Полный список всех параметров можно посмотреть на сайте microsoft. Доступные функции у шрифта можно посмотреть в инструкции шрифта.

Выводы

Самый быстрым способом подключения шрифтов на страницу является тег <link>, но если нужно гибко настроить, тогда @font-face. Про @import забудьте.

Лучший на мой взгляд способ подключения шрифтов на страницу — использование директивы @font-face со свойством font-display. Данный дескриптор требует Page speed.

Есть еще один эффективный способ загрузить свои шрифты — использовать JS и загружать его асинхронно. Ниже приведу пример кода:

Источник