HTML тег <font>
Устаревший тег <font> задавал размер, гарнитуру и цвет текста. Узнайте, почему он удалён в HTML5 и как заменить его CSS-свойствами color, font-family и font-size.
Тег <font> использовался для управления размером, цветом и гарнитурой текста с помощью атрибутов size, color и face. На этой странице объясняется, почему его не следует применять в новом коде, как читать устаревшую разметку с <font> и как точно заменить каждый атрибут современным CSS.
Тег <font> является устаревшим. Он был удалён из стандарта HTML5 и входит в список устаревших HTML-тегов. Не используйте его. Вместо этого стилизуйте текст с помощью CSS.
Почему тег <font> устарел
Тег <font> был признан устаревшим, поскольку смешивает представление (то, как выглядит текст) с содержимым (самим текстом). Современная веб-разработка разделяет эти задачи: HTML описывает структуру и смысл, тогда как CSS отвечает за внешний вид. Такое разделение делает документы компактнее, позволяет легко менять дизайн сайта в одном месте, улучшает доступность и удобство сопровождения.
Практические последствия использования <font> сегодня:
- Стандарт не задаёт отображение по умолчанию для
<font>. Браузеры могут по-прежнему воспроизводить его устаревшие эффекты ради обратной совместимости, однако такое поведение не гарантировано и может измениться или быть проигнорировано. - Повторение
<font>для каждого элемента раздувает разметку. Одно правило CSS позволяет стилизовать сотни элементов одновременно. - Тег не поддерживает адаптивное управление, тематизацию или чистое переопределение так, как это делают CSS-классы.
Если вы встречаете <font> в существующей кодовой базе, воспринимайте его как код, требующий миграции, а не расширения.
Устаревший синтаксис
Тег <font> использовался парно — содержимое помещалось между открывающим тегом <font> и закрывающим </font>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<font size="2" color="#1c87c9">Blue text</font>
</p>
<p>
<font size="3" color="red">Red text, font size increased.</font>
</p>
<p>
<font face="arial" color="#8ebf42">Green text, typeface changed.</font>
</p>
</body>
</html>Результат
Атрибут size и его шкала от 1 до 7
В отличие от CSS, атрибут size тега <font> не принимал пиксели или другие единицы измерения. Он принимал число от 1 до 7, где 1 — наименьший размер, 7 — наибольший, а 3 — значение по умолчанию. Значения могли быть и относительными, например size="+2" или size="-1", — они корректировали размер относительно базового.
Эта фиксированная шкала примерно соответствовала следующим значениям CSS font-size:
<font size> | Приблизительный CSS font-size |
|---|---|
| 1 | x-small (~10px) |
| 2 | small (~13px) |
| 3 | medium (~16px, по умолчанию) |
| 4 | large (~18px) |
| 5 | x-large (~24px) |
| 6 | xx-large (~32px) |
| 7 | ~48px |
Это приблизительные соответствия — точный размер в пикселях зависит от браузера и базового размера шрифта пользователя. С CSS вы больше не ограничены семью шагами; можно задать любой размер в px, em, rem, % или с помощью ключевого слова.
Соответствие атрибутов CSS-свойствам
Каждый атрибут <font> имеет прямую и более удобную замену в CSS:
Атрибут <font> | CSS-свойство | Пример |
|---|---|---|
color | color | color: #1c87c9; |
face | font-family | font-family: Arial, sans-serif; |
size | font-size | font-size: 18px; |
Современный подход с CSS
Рекомендуемый подход — поддерживать HTML в чистоте, а стили размещать в блоке <style> (или во внешней таблице стилей) с использованием селекторов классов. Так одно правило может стилизовать все совпадающие элементы, а изменение дизайна потребует правки CSS лишь в одном месте.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue-text {
color: #1c87c9;
font-size: 16px;
}
.red-text {
color: red;
font-size: 18px;
}
.green-text {
color: #8ebf42;
font-size: 18px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p class="blue-text">Blue text.</p>
<p class="red-text">Red text, font size increased.</p>
<p class="green-text">Green text, typeface changed.</p>
</body>
</html>Миграция устаревшего кода с <font>
Чтобы преобразовать старую разметку с <font> в современный HTML и CSS:
- Удалите обёртку
<font>и оставьте её содержимое внутри семантического элемента, например<p>,<span>или заголовка. - Преобразуйте каждый атрибут в CSS-свойство с помощью таблицы соответствий выше (
color→color,face→font-family,size→font-size). - Переведите числовое значение
sizeв реальный размер CSS с помощью таблицы 1–7 — например,size="5"становитсяfont-size: 24px;(илиx-large). - Объедините повторяющиеся стили в класс в блоке
<style>или во внешней таблице стилей, чтобы их можно было повторно использовать, вместо того чтобы стилизовать каждый элемент отдельно.
Например, <font size="5" color="red" face="arial">Sale!</font> превращается в:
<style>
.sale {
font-size: 24px;
color: red;
font-family: Arial, sans-serif;
}
</style>
<span class="sale">Sale!</span>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| color | rgb (x, x, x) #xxxxxx colorname | Задаёт цвет текста. Используйте CSS color. |
| face | font_family | Задаёт гарнитуру шрифта. Используйте CSS font-family. |
| size | number (1–7) | Задаёт размер текста. Используйте CSS font-size. |
Связанные ресурсы
- Устаревшие HTML-теги — полный список устаревших элементов, которых следует избегать.
- HTML-тег
<basefont>— ещё один устаревший элемент для шрифтов и его замена в CSS. - CSS
font-family, CSSfont-sizeи CSScolor— современный способ стилизации текста.