Очень важно выбрать правильный шрифт для вашего сайта!
Выбор правильного шрифта оказывает огромное влияние на то, как читатели воспринимают текст. Веб-сайт.
Правильный шрифт может создать сильную индивидуальность вашего бренда.
Важно использовать шрифт, который легко читается. Шрифт добавляет значение для вашего текста. Также важно правильно выбрать цвет и размер текста. для шрифта.
В CSS существует пять общих семейств шрифтов:
Шрифты Serif имеют небольшую штриховку по краям каждой буквы. Они создают ощущение формальности и элегантности.
Шрифты Sans-serif имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный вид.
Шрифты Моноширинные — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.
Шрифты Cursive имитируют человеческий почерк.
Шрифты Fantasy - это декоративные/игривые шрифты.
Все различные имена шрифтов принадлежат к одному из общих семейств шрифтов.
Примечание. На компьютерных экранах шрифты без засечек легче читаются, чем шрифты с засечками.
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
для указания шрифта текста.
Примечание. Если имя шрифта состоит из более чем одного слова, оно должно быть заключено в кавычки, например: «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;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>