События шрифта: контроль появления не стилизованного текста.

Опубликовано: 27 декабря 2016      Перевод:

Источник: Font events: Controlling the flash of unstyled text.
Перевод: .

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

Пример FOUT эффекта. Страница блога "Working Library" до и после загрузки веб-шрифтов.

При создании сервиса Typekit особое внимание было уделено быстрой и эффективной доставке шрифтов на веб-страницы. Прилагаемые нами усилия направлены на минимизацию объема загрузки и количества используемых для этого запросов. Мы также стараемся сделать ресурсы веб-шрифтов доступными по всему миру, распределяя их с помощью CDN (*Content Delivery Network — Сеть распределения контента.) таким образом, чтобы обслуживающий сервер всегда был под рукой. А для обеспечения незамедлительной загрузки всех последующих страниц мы применяем кэширование шрифтов. Однако, несмотря на все наши старания, нельзя полностью исключать вероятность возникновения ситуаций, при которых пользователи будут испытывать неудобства, связанные с низкой скоростью загрузки.

В таких случаях недовольство наших клиентов в большей степени вызвано тем, что посетители их сайтов вынуждены иметь дело с явлением, известным как FOUT (*Flash Of Unstyled Content — кратковременное появление нестилизованного текста). Вам, скорее всего, уже приходилось наблюдать FOUT, заключающийся в выводе на экран текста с помощью системных шрифтов по-умолчанию, что объясняется недоступностью применяемого к данному тексту веб-шрифта. Это может происходить в период его загрузки, обработки или же быть обусловлено сбоями самого сервиса.

Кстати, то, будет ли иметь место FOUT при задействовании веб-шрифтов, во многом зависит от того, какой браузер вы используете. Благодаря исследованиям Стива Соудерса (Steve Souders), Пола Айриша (Paul Irish) и других специалистов мы можем с достаточно большой точностью предугадать поведение различных веб-обозревателей в моменты загрузки веб-шрифтов. Вот как работают наиболее распространенные браузеры, когда мы имеем дело со страницей, в которой задействованы Typekit шрифты:

  • IE — Эффект FOUT отсутствует. Визуализация документа не производится до тех пор, пока загрузка веб-шрифтов не будет завершена.
  • Chrome, Safari (Webkit) — Оформленный с помощью веб-шрифта текст не отображается, пока не закончится загрузка шрифта, т.е. FOUT вы тоже не увидите.
  • Firefox — Здесь все зависит от скорости используемого вами сетевого соединения. Если скорость низкая, то текст отображается с помощью шрифта по-умолчанию и лишь при готовности веб-шрифта к использованию, текст будет оформлен корректно.

То есть, когда речь идет о способах контролирования FOUT эффекта, целевым браузером является именно Firefox. В будущем его разработчики возможно решат эту проблему путем скрытия текста на время загрузки веб-шрифтов (как это происходит в браузерах с движком Webkit), однако благодаря функционалу шрифтовых событий Typekit мы способны обеспечить такое же поведение Firefox уже сегодня.

Предотвращения FOUT эффекта можно достигнуть путем использования событий процесса доставки шрифта, привязав к ним скрывающие необходимый текст CSS стили до окончания загрузки веб-шрифтов. Таким образом мы добиваемся имитации браузером Firefox соответствующего поведения Chrome и Safari. Но нельзя забывать и о тех пользователях, для которых веб-шрифты недоступны. Это может происходить по причине отключенной поддержки JavaScript, из-за старой версии веб-обозревателя или же при запрете этого функционала пользовательскими настройками. Мы позаботились об этой категории пользователей, предоставив и им возможность видеть контент, путем плавного снижения уровня его визуальной стилизации.

Давайте представим, что для оформления имени своего блога (с классом blog-title) и названий постов (c классом post-title) я использую шрифты Typekit. Я должен скрыть от пользователя название сайта и постов во всех браузерах (включая Firefox) до тех пор, пока нужные для их стилизации шрифты не будут загружены. Будем считать, что мной уже создан Typekit инструментарий, а входящие в него шрифты использованы в CSS правилах с селекторами .post-title и .blog-title. Тогда вот какой код мне необходимо добавить в нижнюю часть элемента <head> своего блога:

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
.wf-loading .blog-title,
.wf-loading .post-title {
/* скрываем имя сайта и названия постов */
visibility: hidden;
}
</style>

В период загрузки шрифтов сценарий службы Typekit добавляет в элемент <html> имя класса wf-loading. Созданный нами CSS применяет этот класс для скрытия имени блога и названий статей. Как только будет установлено, что веб-шрифты готовы к использованию (active) или недоступны (inactive), класс wf-loading аннулируется и названия становятся видимыми снова. Что касается пользователей с отключенным JavaScript, то для них класс wf-loading вообще никогда не применяется, а значит, названия будут отображаться постоянно.

Благодаря использованию шрифтовых событий загрузка веб-шрифтов в Firefox будет происходить также как и в браузерах, функционирующих на Webkit, таких как Chrome и Safari. Это избавит пользователей от нежелательного появления нестилизованного текста.

Следующая статья из серии публикаций о шрифтовых событиях будет посвящена теме отображения вашего сайта для тех пользователей, которые лишены возможности загрузки веб-шрифтов вообще. Речь пойдет об использовании этих событий в CSS для подстраховочной стилизации соответствующего текста с целью плавной деградации визуального оформления страницы, сохраняя при этом читабельность контента, целостность компоновки и даже соответствие стилю. До встречи!