Главная1 курс UX/UI2 занятие. Основы CSS7. CSS-шрифты
2 занятие

7. CSS-шрифты

Семейство шрифтов: свойство font-family

Свойство font-family используется для выбора начертания шрифта. Поскольку невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты.

font-family: "Times New Roman", Georgia, Serif;
font-family: serif;

Базовое семейство. CSS определяет пять базовых семейств шрифтов:

  • Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia)
  • Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)
  • Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono)
  • Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery)
  • Аллегорические шрифты (Western, Woodblock, Klingon)

    • Насыщенность шрифта: свойство font-weight

    Свойство font-weight задаёт жирность шрифта.

    font-weight: normal;
font-weight: bold;
font-weight: 400;
font-weight: 700;

    Начертание шрифта: свойство font-style

    Свойство font-style позволяет выбрать стиль начертания для шрифта. При этом разница между курсивом и наклонным начертанием заключается в том, что курсив вносит небольшие изменения в структуру каждого символа, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта.

    • normal - Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
    • italic - Выделяет текст курсивом.
    • oblique - Устанавливает наклонное начертание шрифта.
    font-style: normal;
font-style: italic;

    Размер шрифта: свойство font-size

    Свойство font-size указывает желаемую высоту глифов из шрифта.

    font-size: small;
font-size: medium;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;

    Подключение внешнего шрифта Google Fonts

    Далее