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

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

Источник: Font events: Fallback fonts and styles.
Перевод: .

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

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

Хорошо, а как быть с остальными ~2,5% посетителей, использующими веб-обозреватели, в которых такая поддержка отсутствует? Или с теми, кто путем пользовательских настроек отключил функционал веб-шрифтов? Что они увидят при посещении вашего сайта? Вот когда приходят на помощь альтернативные шрифты и стили. Благодаря шрифтовым событиям вы получаете больше контроля над применением альтернативных шрифтов и стилей для той малой категории пользователей, которые не в состоянии увидеть веб-шрифты.

Чем же объясняется незаменимость шрифтовых событий при определении подстраховочных вариантов стилей и шрифтов? Ведь, в конце концов, можно обойтись более простым в использовании CSS свойством font-family, составив с его помощью список шрифтов (так называемый стек шрифтов). Если браузер не сможет найти первый шрифт, он воспользуется вторым, и так далее по списку. Да, все верно, следует также придерживаться принципа, согласно которому альтернативный шрифт выбирается максимально схожим с выбранным вами шрифтом, однако при этом зачастую имеют место небольшие визуальные различия в размере и внешнем виде. Поэтому у вас может возникнуть желание применить немного другие стили, в зависимости от того, какой шрифт используется — веб или альтернативный. Здесь и выходят на сцену события шрифта.

Пример определения альтернативных шрифтов. Это можно сделать с помощью Kit Editor или же вручную в вашем CSS коде.

Каким образом вы обычно устанавливаете резервные шрифты? Стек альтернативных шрифтов должен включать как минимум один резервный вариант шрифта, который стабильно доступен на всех платформах (к примеру, Georgia или Arial), сопровождаемый типовым именем семейства шрифтов (подобно serif или sans-serif). На "W3schools" имеется перечень резервных шрифтов, которые поддерживаются большинством имеющихся на данный момент платформ. Допустим, что вы выбрали Typekit шрифт Adobe Minion Pro, тогда шрифтовой стек должен иметь следующий вид: "Times New Roman", serif. Вы можете установить альтернативные шрифты с помощью имеющейся в Kit Editor (*Редактор CSS кода, предоставляемый службой Typekit.) опции "CSS Stack", либо вставить его непосредственно в CSS код, приблизительно вот так:

.post-body {
font-family: "minion-pro-1", "minion-pro-2", "Times New Roman", serif;
}

Теперь обратимся к реальному примеру, в котором применяются альтернативные стили и шрифты. На обслуживаемом мной сайте для Rimrock Collage Consulting я недавно задействовал Typekit, остановив свой выбор на Lapture Subhead в роли шрифта для названий и навигационных ссылок сайта. На мой взгляд этот шрифт максимально ассоциируется с университетской атмосферой. Поскольку Lapture является достаточно широким шрифтом с засечками, то в качестве резервного варианта отлично подойдет Georgia, а замыкать стековый шрифт будет типовое имя шрифтов с засечками serif. Чтобы прояснить ситуацию, давайте взглянем на то, о чем идет речь — на стили навигационного блока.

Навигация сайта "Rimrock Collage Consulting", оформленная с помощью уже загруженных и активных веб-шрифтов, в действии.

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

#menu {
/* шрифты для навигационного блока */
font-family: "lapture-subhead-1", "lapture-subhead-2", Georgia, serif;

/* настройка параметров используемого в меню шрифта */
font-size: 20px;
font-style: italic;
font-weight: bold;
line-height: 1.2;
text-align: right;
}

Закончив со стилями, я был удовлетворен внешним видом меню. Однако так будет лишь в том случае, когда веб-шрифты доступны, т.е. загружены и обработаны. А что произойдет, если веб-шрифтам будет присвоен статус inactive (неактивны, недоступны)? Проверить это я решил с помощью Firefox плагина Firebug (можно использовать и другие средства, подобные инструментариям веб-разработчика Developer tool из Chrome или Safari). Я отредактировал CSS код в интерактивном режиме, изъяв из определения свойства font-family имена Typekit шрифтов (lapture-subhead-1, lapture-subhead-2).

Сравнение внешнего вида навигационного блока, оформленного с помощью веб-шрифтов (слева) и с помощью альтернативных шрифтов (справа).

Путем удаления этих шрифтов из стека я смог увидеть свою страницу глазами пользователя, для которого они недоступны, когда к целевому тексту вместо веб-шрифтов применяется их резервный вариант. Georgia довольно неплохой «подменный» шрифт, однако с размером (font-size), предустановленным мной для Typekit, он выглядит больше, чем Lapture. Для того, чтобы резервный шрифт не нарушал гармонию дизайна своим несколько увеличенным размером, мне пришлось применить резервные стили, добавив их в созданный ранее CSS код. Теперь при задействовании альтернативных шрифтов их размер (font-size) будет уменьшен, а строчный интервал (line-height) увеличен, что даст необходимый результат:

#menu {
/* Fonts for the menu */
font-family: "lapture-subhead-1", "lapture-subhead-2", Georgia, serif;

/* стили для коррекции шрифта Georgia */
font-size: 16px;
font-style: italic;
font-weight: bold;
line-height: 1.5;
text-align: right;
}

.wf-active #menu {
/* для Lapture нужно немного больший размер и меньший межстрочный интервал */
font-size: 20px;
line-height: 1.2;
}

Сравнение внешнего вида навигационного блока, представленного с помощью веб-шрифтов (слева) и оформленного альтернативными шрифтами и стилями (справа).

Теперь при использовании запасных шрифтов внешний вид сайта практически ничем не отличается от своего аналога, оформленного Typekit веб-шрифтами, в чем легко можно убедиться путем удаления и обратной вставки класса wf-active. Да, пришлось немного потрудиться, но теперь мы уверены, что пользователи, для которых веб-шрифты по какой-либо причине недоступны (старая версия браузера или пользовательские настройки), увидят сайт таким, каким по моему мнению он и должен быть.

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

Обновление от 12 ноября 2010: Поступившую из комментариев информацию хотелось бы использовать в качестве дополнения к статье. Дело в том, что существует еще один, более качественный ресурс "Code Style" по выбору альтернативных шрифтов. Этот сервис располагает данными о шрифтах, используемых каждой из платформ (Windows, Mac и Linux). Кроме того, они располагают весьма удобным компоновщиком стека шрифтов, позволяющим увидеть процент пользователей любой из платформ, которым будет доступен каждый из используемых в вашем стеке шрифтов (вот пример). Имея опыт работы с данным ресурсом, хочу порекомендовать его вам как исключительно полезный инструмент.