Перейти к содержанию

font-family

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

Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

Демо

Шрифт и Цвет

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* A font family name and a generic family name */
font-family:
    Gill Sans Extrabold,
    sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: unset;

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

serif

шрифты с засечками (антиквенные), типа Times;

sans-serif

рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial;

cursive

курсивные шрифты;

fantasy

декоративные шрифты;

monospace

моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

Значение по-умолчанию: Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Применяется ко всем элементам

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>font-family</title>
        <style>
            h1 {
                font-family: Geneva, Arial, Helvetica,
                    sans-serif;
            }
            p {
                font-family: Georgia, 'Times New Roman',
                    Times, serif;
            }
        </style>
    </head>
    <body>
        <h1>Танцы</h1>
        <p>
            Венгры страстно любят танцевать, особенно
            ценятся национальные танцы
        </p>
    </body>
</html>

Комментарии