• Данная статья написана командой Vertex Academy.
• Это одна из статей из нашего Самоучителя по HTML&CSS.
• Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

Привет! В этой статье мы продолжим знакомство с CSS, а именно поговорим о шрифтах.

Какие есть виды шрифтов

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

Тем не менее, все шрифты можно разделить на 4 группы:

• с засечками (serif)
• без засечек (sans-serif)
• рукописные (handwritten)
• моноширинные (monospace)

Группа 1 - с засечками (serif)

Давайте посмотрим на следующую картинку:

Слева мы видим шрифт без засечек, справа - с засечками.

Шрифты с засечками по-английски называются "serif" (англ. "serif" - "засечка", "выступ", "штрих"). К таким шрифтам относятся, например:

1. Times New Roman
2. Georgia
3. Cambria
4. Verdena

Шрифты из данной группы обычно используются для длинных текстов, поскольку считается, что их легче воспринимать благодаря засечкам.

Группа 2 - шрифты без засечек (sans-serif)

Шрифты без засечек ('"sans-serif", от фр. "sans" - "без", и англ. "serif" - "засечка").

К шрифтам без засечек относятся, например:

1. Arial
2. Helvetica
3. Tahoma

Шрифты без засечек часто используются для заголовков.

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

Группа 3 - рукописные шрифты (handwritten)

Вот Вам пример рукописного шрифта:

Рукописные шрифты обычно используются для декоративных элементов на страницах.

Группа 4 - моноширинные шрифты

Моноширинные шрифты - это шрифты, в которых ширина всех букв одинаковая. 

Например:

ЭТО МОНОШИРИННЫЙ ТЕКСТ

К моноширным шрифтам относятся, например:

1. Courier New
2. Lucida Console

Моноширными шрифтами часто пишется программный код.

Например, если Вы пользуетесь текстовым редактором Sublime Text, тогда знайте, что когда Вы набираете код в Sublime, Вы его набираете моноширным шрифтом 🙂

Зачем front-end разработчику знать типы шрифтов?

Действительно - зачем? Разве мы как разработчики не должны просто подключить шрифт, который указан в задании?

Все дело в том, что может так получиться, что человек зашел к Вам на сайт, а при разработке сайта использовали такой шрифт, который по тем или иным причинам не установлен у него на компьютере. И все, беда... Чтобы перестраховаться от таких ситуаций необходимо использовать такое понятие как fonts fallback или просто "фоллбэк".

Пример fallback:

То есть этой строчкой мы указали, что:

• Все параграфы должны отображаться шрифтом Times New Roman.
• Если же вдруг у пользователя нет такого шрифта на компьютере, тогда все тексты параграфов необходимо отображать шрифтом Georgia.
• Если же и этот шрифт не найдется на компьютере пользователя, тогда отображать любым стандартным шрифтом, относящимся к группе шрифтов с засечками (serif).

Как видите, fallback читается браузером слева - направо. 

ИТОГО: 

Выделяют 4 группы шрифтов:

• с засечками (serif)
• без засечек (sans-serif)
• рукописные (handwritten)
• моноширинные (monospace)

Front-end разработчику необходимо знать какие есть виды шрифтов, например, для написания fallback.

Надеемся, данная статья была Вам полезна и теперь Вы знаете чуть больше о видах шрифтов 😉 Читайте дальше наши статьи или приходите учиться к нам на курсы по front-end. Детальнее о наших курсах у нас на сайте здесь.