11. Виды шрифтов в CSS

• Данная статья написана командой Alash Academy.

• Это одна из статей из нашего Самоучителя по HTML&CSS.

• Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

---

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

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

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

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

• с засечками (serif)

• без засечек (sans-serif)

• рукописные (handwritten)

• моноширинные (monospace)

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

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

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

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

1. Times New Roman

2. Georgia

3. Cambria

4. Verdena

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

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

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

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

1. Arial

2. Helvetica

3. Tahoma

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

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

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

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

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

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

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

Например:

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

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

1. Courier New

2. Lucida Console

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

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

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

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

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

Пример fallback:

p{font-family:"Times New Roman", Georgia, serif;}

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

• Все параграфы должны отображаться шрифтом Times New Roman.

• Если же вдруг у пользователя нет такого шрифта на компьютере, тогда все тексты параграфов необходимо отображать шрифтом Georgia.

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

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

ИТОГО:

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

• с засечками (serif)

• без засечек (sans-serif)

• рукописные (handwritten)

• моноширинные (monospace)

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

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