От автора: как браузер отображает шрифты, и для чего нужны резервные стеки. Синтаксис CSS для их настройки. Работа с отдельными символами — об этом в статье.
Для чего нужны резервные стеки шрифтов? В CSS вы часто можете увидеть подобный набор правил:
html { font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}
Что за чушь, не так ли? Почему бы мне просто не указать, какой шрифт я хочу использовать, и всё? Суть заключается в том, что всегда нужны резервные варианты. Браузер попробует использовать тот шрифт, который вы указали первым (в нашем случае, Lato), но если для него этот шрифт недоступен, то он пойдёт дальше по этому списку. Рискну показаться многословным и объясню подробнее, что имеется в виду под этим правилом:
Я хотел бы использовать шрифт Lato, пожалуйста.
Если он недоступен, попробуй шрифт «Lucida Grande».
Если он тоже недоступен, тогда попробуй Tahoma.
Если всех их нет в наличии, тогда прошу выдать мне любой шрифт, подпадающий под обобщённое ключевое слово Sans-Serif
Итак, в каком случае браузеру не будут доступны те шрифты, которые вам нужны? Такое часто случается. Существует всего небольшая группа шрифтов, которые считаются «безопасными» — это значит, что с большой вероятностью на большинстве компьютеров они будут установлены, поэтому браузер сможет их использовать. Например: Arial, Times New Roman, Courier, Georgia, Verdana и некоторые другие.
Но большинство веб-сайтов используют пользовательские веб-шрифты. Шрифт загружается как ресурс (точно так же, как веб-сайт загружает в качестве ресурса сами стили CSS, или изображения, или JavaScript), и тогда шрифт становится доступным для использования. Убедимся в этом на примере широко известных Шрифтов Google:
Сначала загрузите этот шрифт, потом вы сможете использовать его в CSS.
Даже когда вы загружаете шрифт таким способом, существует вероятность того, что он не загрузится. Хоть Google является в общем и целом очень надёжным хостом, вы не можете контролировать их сервера. Тем более, что плохое сетевое соединения может помешать загрузке шрифта. Какой бы не была проблема загрузки шрифта, всё меняется, если использовать резервный стек шрифтов.
Скажем, я использую пользовательский шрифт Merriweather, тогда я настраиваю стек шрифтов таким образом:
html { font-family: Merriweather, Impact, Serif;
}
Если Merriweather не хочет загружаться (или загружается, но так, что появляется после загрузки другого шрифта – это ещё называется мельканием неоформленного текста (с англ. flash of unstyled text — FOUT), то мы увидим что-то типа этого:
Мы видим резервный шрифт, в нашем случае Impact. Выглядит это очень странно и совсем не так, как мы хотели. Лучше, когда ваш желаемый шрифт заменяется чем-то похожим, нежели чем-то совсем другое! Моника Динкулеску изобрела фантастический инструмент под названием сопоставитель стилей шрифтов, который даёт возможность поиграть с резервными шрифтами (благодаря которому я и сделал эту гифку выше).
В вышеприведённом примере мы видим, что Georgia гораздо больше подходит на роль резервного шрифта, нежели Impact! Ну и также в этом примере все немного сложнее, чем простая смена шрифта. Я поменял несколько настроек для того, чтобы эти шрифты настолько подходили друг к другу. Если вы будете делать это самостоятельно, не забывайте, что вы имеете дело с загрузкой шрифтов, а это значительно усложняет ситуацию. Я бы посоветовал обратиться к Подробному руководству загрузки шрифтов Зака Лезермана. В любом случае, выбрать неплохой резервный шрифт – это уже хорошо.
Отдельные символы
Интересный момент: резервные шрифты не работают по принципу: всё или ничего. Отдельные символы шрифта могут выпадать в стек, если для указанного шрифта эти символы недоступны.
В качестве примера я загружу пользовательский шрифт Source Code Pro из Google Fonts, но он будет поддерживать только несколько букв.
Вы можете увидеть в первом предложении, как работают резервные шрифты, такой результат выглядит гораздо аккуратнее, чем результат во втором предложении, так как для пользовательского шрифта некоторые символы были недоступными. Такое чаще случается с символами ASCII или символами с диакритикой, например, ü, ā или ñ.
Ниже вы можете ознакомиться с возможностями использования резервных символов в CSS для того, чтобы сделать что-то уникальное:
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.