Выбор правильного шрифта для вашего сайта очень важен!
Выбор шрифта
Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают веб-сайт.
Правильный шрифт может создать сильную идентичность для вашего бренда.
Важно использовать шрифт, который легко читается. Шрифт придает ценность вашему тексту. Также важно выбрать правильный цвет и размер текста для шрифта.
Общие семейства шрифтов
В CSS существует пять общих семейств шрифтов:
- Serif шрифты - имеют небольшую обводку по краям каждой буквы. Они создают ощущение официальности и элегантности.
- Sans-serif шрифты - имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный внешний вид.
- Monospace шрифты - все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
- Cursive шрифты - имитируют человеческий почерк.
- Fantasy шрифты - это декоративные/игривые шрифты.
Все различные названия шрифтов принадлежат к одному из общих семейств шрифтов.
Разница между шрифтами с засечками и без засечек
Примечание: На экранах компьютеров шрифты без засечек считаются более удобочитаемыми, чем шрифты с засечками.
Все CSS свойства font-family
| Общее семейство шрифтов | Примеры названий шрифтов |
|---|---|
| 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;
}
Попробуйте сами »