CSS -шрифты
Выбор правильного шрифта для вашего сайта очень важен!
Выбор шрифта важен
Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают веб-сайт.
Правильный шрифт может создать сильную индивидуальность для вашего бренда.
Очень важно использовать шрифт, который легко читается. Шрифт добавляет ценность вашему тексту. Также важно правильно подобрать цвет и размер шрифта.
Общие семейства шрифтов
В CSS есть пять общих семейств шрифтов:
- Шрифты с засечками имеют небольшую обводку по краям каждой буквы. Они создают ощущение формальности и элегантности.
- Шрифты без засечек имеют четкие линии (без мелких штрихов). Они создают современный и минималистичный вид.
- Моноширинные шрифты — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
- Курсивные шрифты имитируют человеческий почерк.
- Фантазийные шрифты — это декоративные/игривые шрифты.
Все различные имена шрифтов принадлежат к одному из общих семейств шрифтов.
Разница между шрифтами с засечками и без засечек
Примечание. На экранах компьютеров шрифты без засечек читаются легче, чем шрифты с засечками.
Некоторые примеры шрифтов
| Generic Font Family | Examples of Font Names |
|---|---|
| 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 |
Свойство CSS font-family
В 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;
}