Шрифт CSS

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

Важно выбирать правильный шрифт

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

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

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

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

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

  • Шрифты с засечками (Serif) - у каждого символа есть маленький штрих по краю. Они создают ощущение формы и элегантности.
  • Безшрифтовые шрифты (Sans-serif) - линии шрифта просты (без мелких штрихов). Они создают современный и минималистичный вид.
  • Пространственно-широкие шрифты (Monospace) - здесь все буквы имеют одинаковую фиксированную ширину. Они создают машинный вид.
  • Каллиграфические шрифты (Cursive) - имитируют человеческое письмо.
  • Фантазийные шрифты (Fantasy) - это декоративные/забавные шрифты.

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

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

Сериф против Сансериф

Совет:На экране компьютера безшрифтовые шрифты считаются более читаемыми, чем шрифты с засечками.

Примеры некоторых шрифтов

Общие семейства шрифтов Примеры названий шрифтов
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Свойство font-family в CSS

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

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

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

Пример

Определить различные шрифты для трех абзацев:

.p1 {
  font-family: "Times New Roman", Times, serif;
{}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
{}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
{}

Попробуйте сами