/css/font-family:> Семейства шрифтов_

Свойство font-family

Синтаксис

CSS 1
CSS 2‒2.2
CSS 3
font-family: [[<название-семейства> | <общее-семейство>] [, [ <название-семейства> | <общее-семейство> ] ]* ] | inherit;

Описание

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

Применяется: ко всем элементам;
Наследование: отсутствует;
Проценты: не используются;
Медиа: визуальные.

В CSS шрифты разбиваются на 5 общих семейств шрифтов:

  • Общее семейство serif. Глифы шрифтов имеют засечки и, как правило, определённый интервал. Serif шрифты представляют собой «официальный» стиль текста и часто используются в официальных документах. Примеры семейств шрифтов: «Constantia», «Times New Roman», «Liberation Serif», «Droid Serif», «Century Schoolbook L», «FreeSerif», «Linux Libertine G», «Nimbus Roman No9 L».
    Символы с засечками и без
    Символы с засечками и без
  • Общее семейство sans-serif. Глифы шрифтов имеют низкую контрастность и простые штриховые окончания. Как правило, имеют определённый интервал. Примеры семейств шрифтов: «Droid Sans», «FreeSans», «Nimbus Sans L».
  • Общее семейство cursive. Используется более неформальный стиль письменности. Текст выводимый с помощью таких шрифтов больше похож на надпись сделанную ручкой или кистью. Примеры семейств шрифтов: «Antonella script», «Monplesir script», «Rigoletto», «Alexandra Script», «Bickham Script Two», «Burlak», «Liana», «Aquarelle».
  • Общее семейство fantasy. Включает в себя декоративные или выразительные шрифты, которые содержат выразительные или экспрессивные символы. (Они не включают в себя Pi или Picture шрифты, которые не имеют реальных символов.) Примеры семейств шрифтов: «Aurora», «CRYSIS», «Impact», «Masquerade», «Arnold BocklinC», «Benny Blanco», «elektrodisiac», «Epilog», «Crystal», «Wenatchee», «Young Love ES», «NERVOUS».
  • Общее семейство monospace. Включает в себя шрифты с фиксированной шириной символов. Моноширинные шрифты часто используются для отображения образцов компьютерного кода. Примеры семейств шрифтов: «Liberation Mono», «FreeMono», «Nimbus Mono L», «Andale Mono», «Hack».
Отображение текста общими семействами шрифтов
Отображение текста общими семействами шрифтов

Одновременно через запятую можно указать сразу несколько различных семейств шрифтов (общих семейств шрифтов) [font-family: "Times New Roman", "Liberation Serif";]. При этом, если браузер не может применить первое семейство шрифтов, то предпринимаются попытки применить следующее семейство шрифтов, указанное в данном свойстве.

Примечание

Для обеспечения более надёжного исполнения замысла, авторам рекомендуется так же указывать общее семейство шрифтов [font-family: "Times New Roman", "Liberation Serif", serif;].

Если ни одно из указанных семейств шрифтов не может быть применено к тексту, то применяется либо общее семейство шрифтов (если оно указано), либо семейство шрифтов родительского элемента, либо семейство шрифтов, предусмотренное браузером в качестве значения по умолчанию.

Условия использования

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

JavaScript

[объект].style.fontFamily="[значение]";


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


Значения

<общее-семейство>
Указывает общее семейство шрифтов.

font-family: "Hack", "Liberation Mono", monospace;

<название-семейства>
Указывает название семейства шрифтов.

font-family: "Hack", "Liberation Mono", monospace;

inherit
Указывает, что элемент должен унаследовать параметры родительского элемента.

font-family: inherit;

Начальное значение: Зависит от агента пользователя.


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство font-family</title>
<style type="text/css">
.fFamily1 { font-family: "Times New Roman", "Liberation Serif", serif; }
.fFamily2 { font-family: cursive; }
</style>
</head>
<body>
<h1 style="font-family: fantasy;">Шрифт текста</h1>
<p><span class="fFamily1">Жизнь надо прожить так, чтобы на небесах сказали "Повтори"</span>. <span class="fFamily2">Или в аду "Добро пожаловать, наш Господин"</span>.</p>
</body>
</html>
Свойство font-family