Сразу показывайте запасной текст, если читателям нужны слова, чтобы пользоваться страницей. Временно скрывайте текст только в небольшом элементе, для которого зависимость от конкретного шрифта обоснована. Если вы поддерживаете страницу на Mac, это руководство поможет выбрать политику и проверить её влияние на переносы текста.

Что именно меняется во время загрузки шрифта?

Пока запрошенный шрифт недоступен, запасной шрифт отображает тот же текст другим начертанием. Временно скрытый текст соответствует периоду блокировки загрузки шрифта: браузер выполняет раскладку с невидимым запасным шрифтом. Отсчёт загрузки начинается, когда браузер впервые пытается использовать загружаемый шрифт. В справочнике MDN по font-display описаны эти этапы.

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

За это отвечает дескриптор font-display внутри правила @font-face. Он задаётся в определении шрифта, а не в обычном селекторе абзаца. Это решение при создании страницы: используйте таблицу стилей или настройки шрифтов, доступные для поддерживаемой вами страницы. В документации MDN описано, к чему применяется font-display.

Какое значение font-display подходит для задачи читателя?

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

Значение Пока шрифт недоступен Возможность заменить запасной шрифт Подходящий вариант для начала
swap Очень короткий период блокировки, затем видимый запасной шрифт Неограниченный период замены Короткий заголовок, для которого важно задуманное начертание
fallback Очень короткий период блокировки, затем видимый запасной шрифт Короткий период замены Текст для чтения, если ранняя смена шрифта допустима
optional Очень короткий период блокировки Периода замены нет Текст, для которого важнее всего сохранить первый показанный шрифт
block Запасной шрифт невидим в течение короткого периода блокировки, затем становится видимым Неограниченный период замены Небольшой элемент с определённой зависимостью от шрифта
auto Политика выбирается браузером Политика выбирается браузером Если вас устраивает поведение браузера по умолчанию

Это категории политик, а не точно настраиваемые таймеры. В текущем рабочем черновике W3C CSS Fonts Level 4 рекомендуются типичные длительности, но прямо допускаются различия между браузерами. В нём также указано, что block следует применять только к небольшим фрагментам текста, для удобства использования которых необходим конкретный шрифт. Одного желания сохранить внешний вид заголовка недостаточно, чтобы оправдать его скрытие. W3C: управление отображением шрифтов для каждого начертания.

Для условной страницы с заголовком «Пример коллекции», навигацией «Раздел первый» и несколькими абзацами сначала рассмотрите fallback для текста, предназначенного для чтения. Для короткого заголовка рассмотрите swap, если важно в итоге использовать нужное начертание. Выберите optional, если важнее сохранить первый вариант отображения. Эти рекомендации применяют описанные политики к задачам читателя; они не основаны на результатах измерений.

Используйте схему принятия решений по видимости и перекомпоновке

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

  1. Прочитайте страницу с запасным шрифтом. Может ли читатель понять «Раздел первый», распознать заголовок и прочитать абзацы? Если да, видимый запасной шрифт — подходящий исходный вариант.
  2. Наблюдайте за заменой шрифта. Заголовок занимает дополнительную строку? Подписи переносятся? Следующий абзац сдвигается?
  3. Выберите приемлемый период замены. Используйте swap, если поздняя замена допустима, fallback, если подходит только ранняя замена, или optional, если нужно сохранить первый видимый шрифт.
  4. Требуйте конкретного основания для скрытия текста. Перед выбором block определите, что станет непригодным для использования с запасным шрифтом и почему эту зависимость нельзя устранить.

Например, предположим, что заголовок «Пример коллекции» занимает одну строку с запасным шрифтом и две строки с загруженным. Если условная высота строки заголовка равна 40 пикселям, дополнительная строка увеличивает высоту на 40 пикселей при неизменных интервалах. Содержимое ниже может соответственно сдвинуться. Это иллюстративные данные, а не измерения браузера.

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

Как применить и проверить свой выбор на Mac

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

Найдите соответствующее объявление @font-face в таблице стилей исходного кода страницы или в поддерживаемых настройках шрифтов. Установите для его дескриптора font-display проверяемое значение, например font-display: fallback;. Проверьте и другие объявления для начертаний и стилей, чтобы тест охватывал шрифты, которые действительно запрашивает страница. Размещение дескриптора показано в примере font-display на MDN.

В Chrome на Mac нажмите Command + Option + I, чтобы открыть DevTools. Также можно щёлкнуть правой кнопкой мыши по нужному тексту и выбрать Inspect: на панели Elements в разделе Styles отображается применённый CSS. Оба способа описаны в инструкциях Chrome по открытию DevTools.

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

  1. Откройте Network, включите Disable cache, выберите более медленный профиль в меню Throttling и перезагрузите страницу. Используйте фильтр Font, чтобы сосредоточиться на запросах шрифтов.
  2. Следите за заголовком, навигацией и началом абзаца. Отметьте, остаётся ли текст сначала пустым, появляется ли он запасным шрифтом и меняются ли позднее переносы строк.
  3. Если переход происходит слишком быстро для наблюдения, включите Capture screenshots в настройках панели Network и перезагрузите страницу, чтобы изучить последовательность загрузки.
  4. Отключите замедление и снимите флажок Disable cache. Перезагрузите страницу ещё раз, чтобы сравнить повторное посещение в обычных условиях. Эти элементы управления описаны в справочнике Chrome по функциям Network.

Отдельно проверьте поведение при недоступном шрифте. На панели Network щёлкните правой кнопкой мыши по фактическому запросу шрифта и выберите Block request, затем перезагрузите страницу. Chrome отобразит соответствующий шаблон в Request conditions. Убедитесь, что слова остаются читаемыми и страницу можно использовать с запасным шрифтом. После этого удалите тестовый шаблон или отключите его. В документации Chrome по Request conditions объясняется, как блокировать запросы и распознавать заблокированные запросы.

Если Safari входит в среду Mac, которую вы хотите проверить, повторите просмотр страницы и в нём. Считайте результаты теста в Chrome данными об отрисовке в этом браузере, а не доказательством идентичных сроков в других браузерах: спецификация допускает различия. Ведите краткие записи с указанием браузера, проверяемого значения, исходной видимости и наблюдавшихся переносов.

Что делать, если видимый запасной шрифт слишком сильно меняет раскладку?

Начните с фактического текста и доступной ширины. Сравните короткие подписи, самый длинный заголовок и несколько строк абзацев. Запасной шрифт может визуально напоминать веб-шрифт, но при этом иметь другие значения ширины символов и давать иные переносы.

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

Вертикальные метрики следует проверять отдельно. Дескриптор ascent-override задаёт метрику над базовой линией, используемую при раскладке строк, но на MDN сейчас указано, что его поддержка ограничена. Считайте эту настройку улучшением и сохраняйте читаемую раскладку запасного шрифта в браузерах без её поддержки. MDN: ascent-override.

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

Меняют ли решение предварительная загрузка или библиотека загрузки шрифтов?

Предварительная загрузка помогает обнаружить ресурс. В стандарте HTML WHATWG preload определяется как упреждающая загрузка ресурса в кэш, который предположительно понадобится при текущей навигации. Она не задаёт политику font-display. Рассматривайте её только после выбора приемлемого поведения текста: более ранняя загрузка не заменяет решения о том, что происходит, пока шрифт недоступен. WHATWG: тип ссылки preload.

Для обычного текста страницы начните с CSS. Если в существующем проекте используется Font Face Observer, его метод load() возвращает промис, который выполняется при загрузке шрифта и отклоняется при ошибке. Имя семейства и необязательные параметры начертания, стиля и ширины должны соответствовать запрашиваемому шрифту. В документации библиотеки также описано, как задать подходящий проверочный текст, если в шрифте отсутствуют используемые по умолчанию символы. Документация Font Face Observer.

Успешный обратный вызов библиотеки служит сигналом загрузки; приложение само определяет, что станет видимым. Если пользовательская логика скрывает текст, предусмотрите обработку ошибки, которая восстановит читаемый запасной текст. Иначе после отклонения загрузки правило скрытия, установленное приложением, может остаться включённым. Эта рекомендация по реализации основана на описанных в документации библиотеки сценариях успеха и ошибки.

У нативного API похожее ограничение. document.fonts.ready выполняется после завершения загрузки и операций раскладки для используемых шрифтов; их набор может отличаться от всех объявленных шрифтов, включая дополнительные начертания, которые не успели загрузиться. Поэтому это не доказывает, что видны все необходимые шрифты. MDN: свойство fonts объекта Document.

Аналогично, необязательный текстовый аргумент document.fonts.load() выбирает подходящие начертания по диапазонам Unicode, а не проверяет наличие отдельных глифов. Завершение загрузки и правильная отрисовка всего образца — отдельные проверки. MDN: метод FontFaceSet load().

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

Источники