Содержание
При разработке веб-сайта одним из ключевых элементов страницы, с которой вы будете работать, является текстовое содержимое. Таким образом, когда вы создаете веб-страницу и стилизуете ее с помощью CSS, большая часть этих усилий будет сосредоточена вокруг типографики сайта.
Типографский дизайн играет важную роль в дизайне сайта. Хорошо продуманный и отформатированный текстовый контент помогает сайту стать более успешным, создавая читательский опыт, который приятен и прост в использовании. Частью ваших усилий при работе с шрифтом будет выбор правильных шрифтов для вашего дизайна, а затем использование CSS для добавления этих шрифтов и стилей шрифта к отображению страницы. Это делается с помощью так называемого «набора шрифтов».
Font-стеки
Когда вы указываете шрифт для использования на веб-странице, рекомендуется также включать запасные варианты на случай, если ваш шрифт не найден. Эти запасные варианты представлены в «стеке шрифтов». Если браузер не может найти первый шрифт, указанный в стеке, он переходит к следующему. Он продолжает этот процесс, пока не найдет шрифт, который он может использовать, или у него не останется выбора (в этом случае он просто выберет любой системный шрифт, который захочет). Вот пример того, как будет выглядеть стек шрифтов в CSS при применении к элементу «body»:
тело {
семейство шрифтов: Грузия, «Times New Roman», с засечками;
}
Обратите внимание, что мы сначала указываем шрифт Georgia. По умолчанию это то, что будет использовать страница, но если этот шрифт по какой-то причине недоступен, страница вернется к Times New Roman. Мы заключаем это имя шрифта в двойные кавычки, потому что оно состоит из нескольких слов. Имена однословных шрифтов, такие как Georgia или Arial, не требуют кавычек, но им нужно имя из нескольких слов, чтобы браузер знал, что все эти слова составляют имя шрифта.
Если вы посмотрите конец стека шрифтов, вы должны заметить, что мы заканчиваем словом «засечек». Это общее название семейства шрифтов. В том маловероятном случае, если у человека нет Georgia или Times New Roman на его компьютере, сайт будет использовать любой шрифт с засечками, который он сможет найти. Это предпочтительнее, чем позволить сайту использовать любые шрифты, которые он хочет, потому что вы можете, по крайней мере, указать, какой тип шрифта использовать, чтобы общий вид и тон дизайна сайта были как можно более целыми. Да, браузер выберет для вас шрифт, но, по крайней мере, вы предоставляете руководство, чтобы он знал, какой шрифт лучше всего подойдет для дизайна.
Общие семейства шрифтов
Общее имя шрифта, доступное в CSS:
- скоропись
- фантазия
- моноширинный
- засечка
- без засечек
Хотя существует множество других классификаций шрифтов, доступных в веб-дизайне и типографии, включая slab-serif, blackletter, display, grunge и т. Д., Эти 5 перечисленных выше общих имен шрифтов являются теми, которые вы бы использовали в стеке шрифтов в CSS. Каковы различия в этих классификациях шрифтов? Давайте взглянем!
скоропись Шрифты часто содержат тонкие, богато украшенные буквы, предназначенные для воспроизведения необычного рукописного текста. Эти шрифты из-за своих тонких цветочных букв не подходят для большого блока контента, такого как основная копия. Курсивные шрифты обычно используются для заголовков и для более коротких потребностей текста, которые могут отображаться шрифтами большего размера.
Фантазия шрифты — это несколько сумасшедшие шрифты, которые на самом деле не попадают ни в одну другую категорию. Шрифты, которые копируют известные логотипы, такие как буквы из фильмов о Гарри Поттере или «Назад в будущее», попадают в эту категорию. Опять же, эти шрифты не подходят для основного содержимого, поскольку они часто настолько стилизованы, что чтение длинных фрагментов текста, написанных этими шрифтами, слишком сложно.
Monospace Шрифты — это шрифты, в которых все буквы одинакового размера и разнесены так, как вы могли бы найти на старой пишущей машинке. В отличие от других шрифтов, которые имеют переменную ширину для букв в зависимости от их размера (например, заглавная буква «W» займет гораздо больше места, чем строчная буква «i»), моноширинные шрифты имеют фиксированную ширину для всех символов. Эти шрифты часто используются, когда код отображается на странице, потому что они выглядят совершенно иначе, чем другой текст на этой странице.
засечка Шрифты являются одной из самых популярных классификаций. Это шрифты, которые имеют небольшие дополнительные лигатуры на буквы. Эти дополнительные части называются «засечками». Распространенными шрифтами с засечками являются Georgia и Times New Roman. Шрифты с засечками можно использовать для большого текста, такого как заголовок, а также для длинных фрагментов текста и основного текста.
Без засечек это окончательная классификация, которую мы рассмотрим. Это шрифты, которые не имеют указанных выше лигатур. Название означает «без засечек». Популярные шрифты в этой категории — Arial или Helvetica. Подобно засечкам, шрифты без засечек могут одинаково хорошо использоваться как в заголовках, так и в содержании тела.
