Семейство шрифтов

HTML

HTML и HTML5 Динамический HTML XHTML XHTML Mobile Profile и CHTML Canvas Кодировки символов Document Object Model Семейство шрифтов Редактор HTML Элементы HTML Мнемоники в HTML Фреймы HTML HTML5 audio и HTML5 video Скрипты в HTML Браузерный движок Quirks mode Таблицы стилей Каскадные таблицы стилей Unicode и HTML W3C и WHATWG Цвета HTML Web Storage WebGL Сравнение языков разметки документов браузеров браузерных движков для HTML HTML5 HTML5 Canvas HTML5 Media XHTML (1.1)

В HTML и xHTML семейство шрифтов (font face или font family) определяет какой шрифт будет использоваться браузером для отображения текста на веб-странице. Семейство шрифтов (font family) и другие презентационные атрибуты шрифта могут быть использованы в HTML-коде в каскадных таблицах стилей (CSS) или с помощью устаревшего HTML-элемента font.

.text { font-family: times, serif; font-size:14pt; font-style:italic; }

<p class="text">
Пример текста, отформатированного с помощью класса в таблице CSS.
</p>
 
<p style="font-family: times, serif; font-size:14pt; font-style:italic">
Пример текста, отформатированного с помощью встроенного в тег CSS-кода.
</p>
 
<p><i><font face="times, serif" size="3">
Пример текста, отформатированного с помощью устаревшего HTML-элемента font.
</font></i></p>

В CSS font family (или face в HTML) состоит из набора связанных шрифтов, сгруппированных в семейства. Например, семейство Times включает в себя различные размеры шрифта, стили (такие как роман и курсивом) и жирность (нормальный и жирный шрифт). Браузер может использовать только шрифты установленные на компьютер, что не всегда соответствует реальности. Поэтому разработчики HTML-кода могут перечислять несколько шрифтов в порядке значимости. Как показано выше, список шрифтов разделяется запятыми. Чтобы избежать неожиданных результатов, желательно в конце списка указывать одно из общих семейств шрифтов, доступное с помощью HTML и CSS на всех компьютерах по умолчанию. Если ни один из перечисленных шрифтов не будет доступен браузеру, то он применит свой шрифт по умолчанию, автоматически. В разных браузерах это разный шрифт, но в большинстве современных браузеров пользователь может самостоятельно изменить настройки шрифта по умолчанию используемого. Это можно сделать на свой вкус или по причине ограничений здоровья или возможностей пользователя (например, можно увеличить размер шрифта при слабом зрении).

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

Следующие семейства шрифтов по умолчанию доступны через HTML и CSS на любой машине^[1]:

Семейство	Пример отображения (зависит от браузера)
serif	The quick brown fox jumps over the lazy dog. 0123456789
sans-serif	The quick brown fox jumps over the lazy dog. 0123456789
cursive	The quick brown fox jumps over the lazy dog. 0123456789
fantasy	The quick brown fox jumps over the lazy dog. 0123456789
monospace	The quick brown fox jumps over the lazy dog. 0123456789

Под Windows API эти семейства определяются как Roman, Swiss, Script, Decorative и Modern, соответственно.

Общие шрифты

Вместо семейства шрифтов можно использовать именованный шрифт (например, Хэйсэй Mincho W9), но результат зависит от шрифтов, установленных на компьютере пользователя. Имя шрифта должны быть заключены в кавычки, если они содержат пробелы. Внешний вид будет зависеть от браузера и шрифтов, установленных в системе ^[1]. Например, Internet Explorer от Microsoft по умолчанию всегда отображает Times New Roman как шрифт с засечками, и без засечек Helvetica и Arial.

Шрифт	Пример (зависит от установленных шрифтов)
Antiqua	The quick brown fox jumps over the lazy dog. 0123456789
Arial	The quick brown fox jumps over the lazy dog. 0123456789
Avqest	The quick brown fox jumps over the lazy dog. 0123456789
Blackletter	The quick brown fox jumps over the lazy dog. 0123456789
Calibri	The quick brown fox jumps over the lazy dog. 0123456789
Comic Sans	The quick brown fox jumps over the lazy dog. 0123456789
Courier	The quick brown fox jumps over the lazy dog. 0123456789
Decorative	The quick brown fox jumps over the lazy dog. 0123456789
Fraktur	The quick brown fox jumps over the lazy dog. 0123456789
Frosty	The quick brown fox jumps over the lazy dog. 0123456789
Garamond	The quick brown fox jumps over the lazy dog. 0123456789
Georgia	The quick brown fox jumps over the lazy dog. 0123456789
Helvetica	The quick brown fox jumps over the lazy dog. 0123456789
Impact	The quick brown fox jumps over the lazy dog. 0123456789
Minion	The quick brown fox jumps over the lazy dog. 0123456789
Modern	The quick brown fox jumps over the lazy dog. 0123456789
Monospace	The quick brown fox jumps over the lazy dog. 0123456789
Palatino	The quick brown fox jumps over the lazy dog. 0123456789
Roman	The quick brown fox jumps over the lazy dog. 0123456789
Script	The quick brown fox jumps over the lazy dog. 0123456789
Swiss	The quick brown fox jumps over the lazy dog. 0123456789
Times New Roman	The quick brown fox jumps over the lazy dog. 0123456789
Verdana	The quick brown fox jumps over the lazy dog. 0123456789

Примечания

1. ↑ ^{1 2} Fonts