Выбор шрифта важен
То, как читатели воспринимают сайт, во многом зависит от выбранного вами шрифта.
Удачно выбранный шрифт может также придать бренду яркую индивидуальность. Старайтесь выбирать шрифт, который легко читается, и подбирайте для него подходящие цвет и размер.
Свойство CSS font-family
Шрифт элемента задаётся свойством font-family.
Совет: Перечислите несколько названий шрифтов через запятую, чтобы они работали как система запасных вариантов: браузер, который не поддерживает первый шрифт, перейдёт к следующему.
Первым укажите шрифт, который вам действительно нужен, а последним — общее семейство, чтобы браузер мог выбрать что-то похожее, если ничего другого из списка нет в наличии.
Примечание: Название шрифта из нескольких слов, например "Times New Roman", заключается в кавычки.
Пример
У каждого абзаца свой набор font-family.
<style> создайте три класса абзаца: p1 с "Times New Roman", Times, serif; p2 с Arial, Helvetica, sans-serif; и p3 с "Lucida Console", "Courier New", monospace. Добавьте абзац каждого класса.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<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>
Общие семейства шрифтов CSS
В CSS есть пять общих семейств шрифтов:
- Serif — небольшой штрих завершает края каждой буквы, что выглядит формально и элегантно.
- Sans-serif — чистые линии без штрихов создают современный, минималистичный вид.
- Monospace — фиксированная ширина, общая для всех букв, выглядит механически.
- Cursive — буквы имитируют человеческий почерк.
- Fantasy — шрифты декоративные и игривые.
Любое название шрифта, которое вы встретите, относится к одному из этих семейств.
Разница между шрифтами Serif и Sans-serif
Примечание: Шрифты 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.