Шрифт - CSS свойства

77
посл. ред. 01.11.2016

Краткое описание свойств

font-family
Задаёт имя шрифта или шрифтового семейства.
font-weight
Определяет жирность шрифта.
font-size
Устанавливает размер шрифта.
font-style
Определяет начертание текста.
font-variant
Определяет вид строчных букв.
line-height
Устанавливает междустрочный интервал.
font
Универсальное свойство для задания всех параметров шрифта.

Свойство font-family

Задаёт имя шрифта или шрифтового семейства. Значения можно перечислить через запятую. Браузер по очереди будет проверять наличие шрифта и применит первый найденный. Если название шрифта состоит из нескольких слов, то его название нужно писать в кавычках. Последним параметром лучше всего указывать шрифтовое семейство, тогда при отсутствии всех шрифтов браузер применит шрифт нужного семейства.

Краткая информация

Значение по умолчанию зависит от браузера
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM fontFamily

Значения

  • serif - шрифты с засечками.
  • sans-serif - шрифты без засечек.
  • cursive - курсивные шрифты.
  • fantasy - декоративные шрифты.
  • monospace - моноширинные шрифты.

Примеры

font-family: "Arial Black", Verdana, sans-serif;

Свойство font-weight

Определяет жирность шрифта.

Краткая информация

Значение по умолчанию normal
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM fontWeight

Значения

  • Числовое значение от 100 до 900, кратное 100.
  • Ключевые слова:
    • normal - соответствует 400.
    • bold - соответствует 700.
    Относительно родительского элемента:
    • lighter - меньше на 100.
    • bolder - больше на 100.

Примеры

font-weight: 400;
/* или */
font-weight: normal;

Свойство font-size

Устанавливает размер шрифта.

Краткая информация

Значение по умолчанию medium
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM fontSize

Значения

  • Числовой - абсолютный или относительный, используя соответствующие единицы измерения.
  • Ключевые слова:
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large
    Относительно родительского элемента (значения зависят от настроек браузера пользователя):
    • smaller - меньше на 1 размер.
    • larger - больше на 1 размер.

Примеры

font-size: 16px;
/* или */
font-size: large;

Свойство font-style

Определяет начертание текста.

Краткая информация

Значение по умолчанию normal
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM fontStyle

Значения

  • normal - нормальное начертание (по умолчанию).
  • italic - курсивное начертание (браузер подбирает подходящий шрифт).
  • oblique - наклонное начертание (лёгкий наклон нормального шрифта).

Примеры

font-style: italic;

Свойство font-variant

Определяет вид строчных букв.

Краткая информация

Значение по умолчанию normal
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM fontVariant

Значения

  • normal - оставить обычными (по умолчанию).
  • small-caps - представить буквы в виде заглавных, но меньшего размера.

Свойство line-height

Служит для задания междустрочного интервала (расстояние между базовыми линиями соседних строк).

Краткая информация

Значение по умолчанию normal
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM lineHeight

Значения

  • Положительное число - множитель от текущего размера шрифта. Например, значение 1.5 задаёт полуторный интервал.
  • Расстояние в соответствующих единицах измерения. Процентная запись задаёт интервал относительно текущего размера шрифта.
  • Ключевое слово normal (вычисляется автоматически).

Свойство font

Универсальное свойство для задания всех параметров шрифта. Объединяет в себе свойства font-family, font-weight, font-style, font-variant и font-size.

Краткая информация

Значение по умолчанию зависит от индивидуальных свойств
Применяется ко всем элементам
Наследуется да
Имя свойства в DOM font

Значения

Значения свойств записываются в любом порядке через пробел. Для свойств font-family и font-size значения должны быть указаны обязательно, остальные можно не указывать. Свойству font-size можно добавить свойство line-height через слэш /.

Альтернативный формат - применение одного из стандартных шрифтов, используемых в интерфейсе операционной системы.

  • caption - шрифт кнопок.
  • icon - шрифт подписей под иконками.
  • menu - шрифт пунктов меню.
  • message-box - шрифт диалоговых окон.
  • small-caption - мелкий шрифт заголовков
  • status-bar - шрифт строки состояния