HTML тег "font" — коли стилі ще не знали про CSS

Колись давно, ще до появи кросівок з LED-підсвіткою й HTML5, дизайнери сайтів вручну розфарбовували текст за допомогою тега <font>. І тоді це здавалося магією.

<font color="red" size="4" face="Arial">Привіт, інтернет!</font>

Оцей милий код змінював колір, розмір і шрифт тексту. Без жодного CSS. Без класів. Без стилів. Просто в лоб.

Що це за тег <font>?

HTML-тег <font> використовувався для зміни вигляду тексту:

• color — колір тексту;

• size — розмір (від 1 до 7, або у відносних значеннях типу +1);

• face — шрифт (Arial, Verdana, Comic Sans і вся ця дика фауна 2000-х).

Приклад:

<font color="blue" size="5" face="Georgia">Важливий заголовок</font>

А тепер сумна правда…

Тег <font> визнано застарілим у HTML5. Йому вже дали почесну пенсію разом із кліпартами з WordArt’у.

Чому так?

• Порушує принцип відокремлення контенту від дизайну.

• Не підтримується в сучасній адаптивній верстці.

• Його функції давно перебрали на себе CSS стилі — і роблять це набагато краще!

А як тепер це зробити правильно?

Використовуємо CSS — сучасно, красиво і гнучко:

<p style="color: blue; font-size: 24px; font-family: Georgia;">
  Важливий заголовок
</p>

Бонус: стилі можна винести в окремий CSS-файл — сайт стане швидшим і легшим у підтримці.

Підсумуємо, щоб не загубитися:

Хочеш сучасний сайт без тегів-динозаврів?

Пиши мені — допоможу створити стильний, швидкий і професійний сайт, де кожен тег — на своєму місці, а кожен елемент працює на тебе, а не проти.