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

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

Материал из Викиучебника — открытых книг для открытого мира

В 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. а б Fonts(недоступная ссылка — история)