Стек шрифтов — это список шрифтов в объявлении семейства шрифтов CSS. Шрифты перечислены в порядке предпочтения, которое вы бы хотели, чтобы они отображались в случае возникновения проблемы, например, если шрифт не загружается. Стек шрифтов позволяет вам контролировать внешний вид шрифтов на веб-странице, даже если на компьютере посетителя сайта нет начального шрифта, который вы вызывали.
Синтаксис стека шрифтов
Итак, как выглядит стек шрифтов? Вот пример:
body {
font-family: Georgia, "Times New Roman", с засечками;
}
Здесь есть несколько вещей, на которые стоит обратить внимание.
- Имена шрифтов разделяются запятыми. Вы можете добавить столько шрифтов, сколько захотите, если они разделены запятыми. Браузер попытается загрузить первый указанный шрифт. Если это не удастся, он будет пытаться выполнить каждый шрифт, пока не найдет тот, который сможет использовать. В этом примере используются веб-безопасные шрифты, и на компьютере посетителя сайта, скорее всего, есть шрифт Georgia. Если нет, браузер переместится вниз по стеку и попробует следующий указанный шрифт.
- Имена шрифтов из нескольких слов заключаются в кавычки. Такие шрифты, как Times New Roman, Trebuchet MS, Courier New и т. Д., Требуют двойных кавычек, чтобы браузер знал, что слова в каждом имени шрифта принадлежат друг другу.
- Стек шрифтов обычно заканчивается общей классификацией шрифтов (с засечками или без засечек ). В этом случае serif указывает браузеру использовать шрифт, который, по крайней мере, попадает в эту категорию, если определенные шрифты в стеке недоступны. Например, если вы используете шрифты sans-serif, такие как Arial и Verdana, завершение стека шрифтов классификацией sans-serif гарантирует, что в случае проблемы с загрузкой шрифт, отображаемый по крайней мере, будет в этой категории. Такая ситуация встречается все реже, но лучше всего использовать общий шрифт, чтобы быть в безопасности.
Стеки шрифтов и веб-шрифты
Современные веб-сайты используют веб-шрифты, которые либо включены на сайт вместе с другими ресурсами, такими как изображения, файлы Javascript и т. Д., Либо связаны с внешним хранилищем шрифтов, таким как Google Fonts или Typekit. Хотя эти шрифты должны загружаться без проблем, использование стека шрифтов гарантирует, что вы имеете некоторый контроль над любыми возникающими проблемами.
То же самое касается веб-безопасных шрифтов; по умолчанию они находятся на большинстве компьютеров. (Все шрифты в этом примере являются веб-безопасными.) Несмотря на то, что вероятность пропуска шрифта очень мала, указание стека шрифтов помогает правильно оформить типографский дизайн сайта .
CSS в типографском дизайне
Изображения получают большую любовь, когда дело доходит до веб-сайтов, но это письменное слово, на которое полагаются поисковые системы. Это делает типографский дизайн критически важным. С важностью текста сайта возникает необходимость обеспечить его привлекательность и удобство чтения. Это делается с помощью CSS (каскадных таблиц стилей). В современном веб-дизайне CSS хранит спецификации, которые определяют стиль сайта, отдельно от тех, которые определяют его структуру (HTML).