CSS-шрифты


Оглавление

    Показать оглавление


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


Выбор шрифта важен

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

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

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


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

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

  1. Шрифты Serif имеют небольшую штриховку по краям каждой буквы. Они создают ощущение формальности и элегантности.

  2. Шрифты Sans-serif имеют чистые линии (без мелких штрихов). Они создают современный и минималистичный вид.

  3. Шрифты Моноширинные — здесь все буквы имеют одинаковую фиксированную ширину. Они создают механический вид.

  4. Шрифты Cursive имитируют человеческий почерк.

  5. Шрифты 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

В 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>