Семейство шрифтов в 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 |