Шрифты CSS 

Выбор правильного шрифта для вашего сайта очень важен!

Выбор шрифта важен

Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают веб-сайт.

Правильный шрифт может создать сильную идентичность для вашего бренда.

Важно использовать шрифт, который легко читается. Шрифт добавляет ценность вашему тексту. Также важно выбрать правильный цвет и размер текста для шрифта.

Общие Семейства Шрифтов

В CSS есть пять общих семейств шрифтов:

1. Шрифты с засечками имеют небольшой штрих по краям каждой буквы. Они создают ощущение формальности и элегантности.
2. Шрифты без засечек имеют чистые линии (без небольших штрихов). Они создают современный и минималистичный вид.
3. Моноширные шрифты - здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
4. Курсивные шрифты имитируют человеческий почерк.
5. Фэнтезийные шрифты - это декоративные/игривые шрифты.

Все названия шрифтов принадлежат к одному из общих семейств шрифтов.

Разница между шрифтами Serif и Sans-Serif

Некоторые примеры шрифтов

Свойство семейства шрифтов CSS

В CSS мы используем свойство font-family для указания шрифта текста.

Примечание: Если название шрифта составляет более одного слова, оно должно быть в кавычках, например: "Times New Roman".

Совет: Свойство font-family должно содержать несколько названий шрифтов в качестве "запасного варианта", чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Начните с нужного шрифта и завершите типовым семейством (чтобы браузер мог выбрать аналогичный шрифт в типовом семействе, если другие шрифты недоступны). Названия шрифтов следует разделять запятой.

Пример

Укажите несколько различных шрифтов для трех абзацев:

.p1 { font-family: "Times New Roman", Times, serif; }

.p2 { font-family: Arial, Helvetica, sans-serif; }

.p3 { font-family: "Lucida Console", "Courier New", monospace; }