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