События шрифта и функции обратного вызова в JavaScript.

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

Источник: Font events: Using JavaScript callbacks.
Перевод: .

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

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

Функции обратного вызова и события шрифта в действии на примере домашней страницы Typekit.

Тема задействования шрифтовых событий в CSS уже обсуждалась нами ранее. Теперь давайте посмотрим, чем они могут быть полезны в JavaScript?

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

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

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
try {
Typekit.load({
loading: function() {
// код, выполняющийся в момент начала загрузки шрифтов
},
active: function() {
// код, выполняющийся когда шрифты готовы к использованию
},
inactive: function() {
// код, отвечающий за действия в случае недоступности шрифтов.
}
})
} catch(e) {}
</script>

Теперь давайте обратим внимание на простую тестовою страницу, демонстрирующую один из способов реализации эффекта постепенного появления тескта с помощью упоминаемых выше событий шрифта. В нашем примере использована библиотека jQuery, благодаря которой такие действия как манипуляция DOM структурой, скрытие и появление элементов выполняются на одном дыхании. Хотя вы можете делать тоже самое с помощью другой библиотеки. Как говориться — на ваше усмотрение. Ниже перечисляются основные шаги, которых необходимо придерживаться для достижения требуемого результата:

  1. Сразу же по окончании построения модели DOM прячем оформляемый веб-шрифтом текст посредством visibility: hidden.
  2. В момент, когда загрузка шрифта будет завершена, удаляем правило visibility: hidden и проявляем текст путем применения имеющегося в jQuery метода .fadeIn.
  3. Если при загрузке шрифта произошла какая-либо ошибка, правило visibility: hidden должно быть удалено. И в этом случае мы можем применить альтернативные стили с помощью класса wf-inactive (как это обсуждалось в предыдущей статье).

Покадровая съемка процесса визуализации тестовой страницы. Mac Firefox сверху и Windows IE8 снизу.

Если хорошенько присмотреться к изображению, то можно заметить, что в IE местами видны прерывистые черные контуры, образующиеся на символах в процессе их проявления. Это объясняется отсутствием в IE8 (и его более ранних версиях) поддержки CSS свойства opacity, вместо которого этот браузер использует собственный проприетарный фильтр. Следующая, девятая версия обещает исправить этот недостаток. Тем не менее, если мы хотим уже сейчас избавиться от появления таких безобразных контуров, то с помощью проверки доступности CSS свойства opacity мы должны использовать другой метод в браузерах, для которых эта проверка дала отрицательный результат. В крайнем случае, можно обойтись и без переходных моментов, и отобразить текст сразу же по готовности шрифта. Что касается проверки, то она с легкостью реализуется благодаря имеющемуся в jQuery методу jQuery.support.opacity.

Объединяя все описанное выше воедино, взглянем на используемый в тестовой странице JavaScript код, который сначала загружает библиотеку jQuery, затем инструментарий нашего сервиса, после чего создает эффект проявления текста (одновременно исключая его в браузерах, не поддерживающих CSS свойство opacity):

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/lmu3khn.js"></script>
<script type="text/javascript">
(function() {
$(document).ready(function() {
// как только DOM построена, прячем целевой текст
$('#example').css('visibility', 'hidden');
});
try {
Typekit.load({
active: function() {
// когда шрифт будет готов к использованию, плавно проявляем текст
// в браузерах, где не работает св-во opacity, переход отсутствует
if (jQuery.support.opacity) {
$('#example').css('visibility', 'visible').hide().fadeIn();
} else {
$('#example').css('visibility', 'visible');
}
},
inactive: function() {
// если шрифт неактивен, то просто делаем текст видимым
// здесь можно применить альтернативные стили с использованием класса wf-inactive
$('#example').css('visibility', 'visible');
}
})
} catch(e) {}
})();
</script>

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

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