Типографский дизайн - критически важная часть успешного дизайна веб-сайта. Создание сайтов с легко читаемым текстом и великолепным внешним видом - цель каждого профессионала в области веб-дизайна. Для этого вам потребуется установить определенные шрифты, которые вы хотите использовать на своих веб-страницах. Чтобы указать гарнитуру или семейство шрифтов в ваших веб-документах, вы будете использовать свойство стиля font-family style в своем CSS.
Самый простой стиль семейства шрифтов, который вы могли бы использовать, будет включать только одно семейство шрифтов:
п {
семейство шрифтов: Arial;
}
Если вы применили этот стиль к странице, все абзацы будут отображаться в семействе шрифтов «Arial». Это замечательно, поскольку «Arial» - это так называемый «веб-шрифт», что означает большую часть (если не все) на компьютерах он будет установлен, вы можете расслабиться, зная, что ваша страница будет отображаться в предполагаемом шрифт.
Итак, что произойдет, если выбранный вами шрифт не найден? Например, если вы не используете «веб-шрифт» на странице, что делает пользовательский агент, если у него нет этого шрифта? Они делают замену.
Это может привести к появлению некоторых забавно выглядящих страниц. Однажды я зашел на страницу, где мой компьютер полностью отображал его в «Wingdings» (набор значков), потому что на моем компьютере не было шрифт, который указал разработчик, и мой браузер сделал ужасный выбор в том, какой шрифт он будет использовать в качестве замена. Страница была совершенно нечитаема для меня! Здесь в игру вступает стек шрифтов.
Разделите несколько семейств шрифтов запятыми в стеке шрифтов
«Стек шрифтов» - это список шрифтов, которые вы хотите использовать на своей странице. Вы должны расположить выбранные шрифты в порядке их предпочтений и разделить каждый запятой. Если у браузера нет первого семейства шрифтов в списке, он попробует второе, а затем третье и так далее, пока не найдет тот, который есть в системе.
семейство шрифтов: Кошечка, Алжирский, Бродвейский;
В приведенном выше примере браузер сначала будет искать шрифт «Pussycat», затем «Алжирский», а затем «Бродвейский», если ни один из других шрифтов не был найден. Это дает вам больше шансов, что будет использован хотя бы один из выбранных вами шрифтов. Он не идеален, поэтому у нас есть еще больше, которые мы можем добавить в наш стек шрифтов (читайте дальше!).
Использовать общие шрифты в последнюю очередь
Таким образом, вы можете создать стек шрифтов со списком шрифтов, при этом ни один из которых браузер не сможет найти. Вы не хотите, чтобы ваша страница отображалась нечитаемой, если браузер выбрал плохую замену. К счастью, у CSS есть решение для этого, и оно называется общие шрифты.
Вы всегда должны заканчивать свой список шрифтов (даже если это список из одного семейства или только веб-безопасные шрифты) общим шрифтом. Вы можете использовать пять:
- Курсив
- Фантазия
- Моноширинный
- Без засечек
- Засечки
Два приведенных выше примера можно изменить на:
семейство шрифтов: Arial, sans-serif;
или же.
семейство шрифтов: Кошечка, алжирский, бродвейский, фэнтези;
Некоторые названия семейств шрифтов состоят из двух или более слов
Если семейство шрифтов, которое вы хотите использовать, состоит из нескольких слов, вы должны заключить его в двойные кавычки. Хотя некоторые браузеры могут читать семейства шрифтов без кавычек, могут возникнуть проблемы, если пробелы сжаты или проигнорированы.
семейство шрифтов: "Times New Roman", с засечками;
В этом примере вы можете видеть, что название шрифта «Times New Roman», состоящее из нескольких слов, заключено в кавычки. Это сообщает браузеру, что все три этих слова являются частью этого имени шрифта, в отличие от трех разных шрифтов с именами из одного слова.