Больше контроля благодаря событиям Typekit шрифта.

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

Источник: More control with Typekit’s font events.
Перевод: .

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

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

Имена классов шрифтовых событий, видимые с помощью Firebug, на примере обзора сайта Jax Vineyards.

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

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

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

В рамках базового варианта внедряемого Typekit кода доступны три основных шрифтовых события:

  1. Loading — шрифты из вашего Typekit инструментария находятся в процессе загрузки.
  2. Active — загрузка шрифтов из вашего инструментария закончена, и проверка корректности их представления на странице прошла успешно.
  3. Inactive — предусмотренные вашим инструментарием шрифты не применяются по причине отсутствия их поддержки используемой платформой или потому, что они по какой-либо причине не были загружены.

Эти события доступны для веб-разработчиков в обеих средах, как CSS, так и JavaScript.

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

<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 {
/* стили, применяемые в ходе загрузки шрифтов */
}

.wf-active {
/* стили, используемые при активных веб-шрифтах */
}

.wf-inactive {
/* стили при неактивных шрифтах */
}
</style>

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

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

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

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

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