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