Что такое стек шрифтов и как они используются?

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

Синтаксис стека шрифтов

Итак, как выглядит стек шрифтов? Вот пример:

тело {
семейство шрифтов: Грузия, «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).

    Оригинальная статья Дженнифер Крынин; под редакцией Джереми Жирара.

    Ссылка на основную публикацию