Хотя изображения получают большую любовь, когда речь заходит о веб-сайтах, именно письменное слово обращается к поисковым системам и передает содержание большинства сайтов. Таким образом, типографский дизайн является критически важной частью дизайна сайта. С важностью текста сайта возникает необходимость убедиться, что он выглядит хорошо и легко читается. Это делается с помощью стилей CSS (Cascading Style Sheets).
Следуя современным стандартам веб-дизайна, если вы хотите диктовать внешний вид текстового содержимого веб-сайта, вы будете делать это с помощью CSS. Это отделяет этот стиль CSS от структуры HTML страницы. Например, если вы хотите установить шрифт страницы в «Arial», вы можете сделать это, добавив следующее правило стиля в свой CSS (это, вероятно, будет сделано во внешней таблице стилей CSS, которая поддерживает стили для каждого страница на сайте):
body {
семейство шрифтов: Arial;
}
Этот шрифт установлен для «body», поэтому CSS-каскад будет применять стиль ко всем остальным элементам страницы. Это связано с тем, что каждый другой элемент HTML является дочерним по отношению к элементу body, CSS-стили, такие как семейство шрифтов или цвет, будут каскадно переходить из родительского в дочерний элемент. Это будет иметь место, если для определенных элементов не будет добавлен более конкретный стиль. Единственная проблема с этим CSS заключается в том, что указан только один шрифт. Если этот шрифт не может быть найден по какой-либо причине, браузер заменит другой вместо него. Это плохо, потому что вы не можете контролировать, какой шрифт используется; браузер выберет для вас, и вам может не понравиться то, что он решил использовать! Вот где приходит стек шрифтов.
Стек шрифтов – это список шрифтов в объявлении семейства шрифтов CSS. Шрифты перечислены в порядке предпочтения, чтобы вы хотели, чтобы они появлялись на сайте в случае возникновения проблемы, например, если шрифт не загружается. Стек шрифтов позволяет дизайнеру контролировать внешний вид шрифтов на веб-странице, даже если на компьютере нет исходного шрифта, который вы вызывали.
Итак, как выглядит стек шрифтов? Вот пример:
body {
семейство шрифтов: Грузия, «Times New Roman», с засечками;
}
Здесь есть несколько вещей, на которые стоит обратить внимание.
Во-первых, вы увидите, что мы разделяли разные имена шрифтов запятыми между ними. Вы можете добавить столько шрифтов, сколько захотите, если они разделены запятой. Браузер попытается загрузить первый указанный шрифт. Если это не удастся, он будет пытаться выполнить каждый шрифт, пока не найдет тот, который сможет использовать. В этом примере мы используем веб-безопасные шрифты, и «Грузия», скорее всего, будет найдена на компьютере человека, который посещает сайт (браузер ищет на вашем компьютере шрифты, указанные на странице, поэтому сайт фактически сообщает компьютер, который загружает шрифты из вашей системы). Если по какой-либо причине этот шрифт не был найден, он переместился бы вниз по стеку и попытался использовать следующий указанный шрифт.
Что касается следующего шрифта, обратите внимание, как он записан в стеке. Название «Times New Roman» заключено в двойные кавычки. Это потому, что имя шрифта состоит из нескольких слов. Любые имена шрифтов с более чем одним словом (Trebuchet MS, Courier New и т. Д.) Должны иметь имя в двойных кавычках, чтобы браузер знал, что все эти слова являются частью одного имени шрифта.
Наконец, мы заканчиваем стек шрифтов “serif”, который является общей классификацией шрифтов. В маловероятном случае, когда ни один из названных вами шрифтов в вашем стеке не будет доступен, браузер вместо этого просто найдет шрифт, который, по крайней мере, попадает в правильную выбранную вами классификацию. Например, если вы используете шрифты без засечек, такие как Arial и Verdana, то окончание стека шрифтов классификацией «без засечек» по крайней мере сохранит шрифт в этом общем семействе, если возникнет проблема с загрузкой. Следует признать, что очень редко браузер не может найти какой-либо из шрифтов, перечисленных в стеке, и ему приходится вместо этого использовать эту общую классификацию, поэтому рекомендуется включать его в любом случае, чтобы быть вдвойне безопасным.
Стеки шрифтов и веб-шрифты
Многие веб-сайты сегодня используют веб-шрифты, которые либо включены на сайт вместе с другими ресурсами (такими как изображения сайта, файл Javascript и т. Д.), Либо связаны с расположением вне шрифта, таким как Google Fonts или Typekit. Хотя эти шрифты должны загружаться, поскольку вы ссылаетесь на сами файлы, вы все равно хотите использовать стек шрифтов, чтобы обеспечить некоторый контроль над любыми проблемами, которые могут возникнуть. То же самое относится и к «безопасным для сети» шрифтам, которые должны быть на чьем-то компьютере (обратите внимание, что шрифты, которые мы использовали в качестве примеров в этой статье, включая Arial, Verdana, Georgia и Times New Roman, являются всеми веб-безопасными шрифтами, которые должны быть на компьютере человека).Даже если вероятность пропустить шрифт очень мала, указание стека шрифтов поможет максимально улучшить типографский дизайн сайта.
Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирар.
