Skip to main content

Каковы общие семейства шрифтов в CSS?

JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Июнь 2026)

JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Июнь 2026)
Anonim

При разработке веб-сайта одним из ключевых элементов страницы, с которой вы будете работать, является текстовое содержимое. Таким образом, когда вы создаете веб-страницу и ставите ее с помощью CSS, большая часть этих усилий будет сосредоточена вокруг типографии сайта.

Типографический дизайн играет важную роль в дизайне сайта. Хорошо продуманный и форматированный текстовый контент помогает сайту быть более успешным, создавая опыт чтения, который одновременно приятен и удобен в использовании. Частью ваших усилий по работе с типом будет выбор правильных шрифтов для вашего дизайна, а затем использование CSS для добавления этих шрифтов и стилей шрифтов на экран страницы. Это делается с помощью того, что называется «font-stack»,

Font-стеки

Когда вы указываете шрифт для использования на веб-странице, лучше всего также включать резервные опции, если ваш выбор шрифта не может быть найден. Эти варианты резервного копирования представлены в «стек шрифтов». Если браузер не может найти первый шрифт, указанный в стеке, он перемещается на следующий. Он продолжает этот процесс, пока не найдет шрифт, который он может использовать, или у него заканчиваются выборы (в этом случае он просто выбирает любой системный шрифт, который он хочет). Вот пример того, как стек шрифтов будет выглядеть в CSS при применении к элементу body:

body { font-family: Грузия, «Times New Roman», засечка;}

Обратите внимание, что мы сначала указываем шрифт Georgia. По умолчанию это то, что будет использовать страница, но если по какой-то причине этот шрифт недоступен, страница будет возвращена Times New Roman. Мы включаем это имя шрифта в двойные кавычки, потому что это многословное имя. Однотипные имена шрифтов, такие как Georgia или Arial, не требуют кавычек, но им нужно многословное имя шрифта, поэтому браузеру известно, что все эти слова составляют имя шрифта.

Если вы посмотрите на конец стека шрифтов, вы должны заметить, что мы заканчиваем словом «serif». Это общее семейство имен шрифтов. В маловероятном случае, если у человека не будет Грузии или Times New Roman на своем компьютере, сайт будет использовать любой шрифт serif, который он может найти. Это предпочтительнее, чтобы позволить сайту отступать от любых шрифтов, которые он хочет, потому что вы можете, по крайней мере, сказать, какой шрифт использовать, чтобы общий внешний вид и тон дизайна сайта были максимально целыми. Да, браузер выберет для вас шрифт, но по крайней мере вы предоставляете руководство, чтобы он знал, какой шрифт будет лучше всего работать в дизайне.

Общие семейство шрифтов

Общее имя шрифта, доступное в CSS:

  • скоропись
  • фантастика
  • моноширинный
  • засечка
  • без засечек

Хотя существует множество других классификаций шрифтов, доступных в веб-дизайне и типографии, в том числе slab-serif, blackletter, display, grunge и т. Д., Эти 5 названных выше имен шрифтов, которые вы использовали бы в стеке шрифтов в CSS. Каковы различия в этих классификациях шрифтов? Давайте взглянем!

скоропись шрифты часто содержат тонкие, богато оформленные буквенные формы, предназначенные для воспроизведения мозаичного рукописного текста. Эти шрифты из-за их тонких цветковых букв не подходят для большого блока контента, такого как копия тела. Курсорские шрифты обычно используются для заголовков и более коротких текстовых запросов, которые могут отображаться в больших размерах шрифта.

Фантастика шрифты - это несколько сумасшедшие шрифты, которые действительно не попадают ни в одну другую категорию. Шрифты, которые реплицируют известные логотипы, такие как буквы из фильмов о Гарри Поттере или Назад в будущее, попадают в эту категорию. Еще раз, эти шрифты не подходят для содержания тела, поскольку они часто настолько стилизованы, что чтение более длинных фрагментов текста, написанного на этих шрифтах, слишком сложно.

Monospace шрифты - это те, где все буквы имеют одинаковый размер и разнесены, как вы бы нашли на старой пишущей машинке. В отличие от других шрифтов, которые имеют переменную ширину для букв в зависимости от их размера (например, столица «W» занимает гораздо больше места, чем нижний регистр «i»), моноширинные шрифты являются фиксированной шириной для всех символов. Эти шрифты часто используются, когда код отображается на странице, потому что они выглядят совершенно иначе, чем другие тексты на этой странице.

засечка Шрифты являются одной из наиболее популярных классификаций. Это шрифты, которые имеют небольшие дополнительные лигатуры на буквенных формах. Эти дополнительные части называются «засечками». Обычными шрифтами с засечками являются Грузия и Times New Roman. Шрифты Serif можно использовать для большого текстового заголовка, а также для длинных фрагментов текста и копии тела.

Без засечек это окончательная классификация, на которую мы будем смотреть. Это шрифты, которые не имеют вышеупомянутых лигатур. Название означает «без засечек». Популярные шрифты в этой категории будут Arial или Helvetica. Подобно засечкам, шрифты sans-serif могут использоваться одинаково хорошо в заголовках, а также в содержании тела.