Як змінити розмір шрифту в HTML

Якісна верстка веб-сайтів має головну мету — зробити інформацію на сторінці максимально читабельною і зручною для сприйняття користувачем. І робота з текстом за допомогою html є основним і базовим навиком, який необхідно мати при роботі з сайтами. В цій статті детально описано, як змінити розмір тексту засобами мови веб-розмітки.

Форматування тексту за допомогою HTML – це дуже просто

Кожен, хто хоча б раз стикався з необхідністю створення або редагування сайтів, насамперед ставив питання, яким чином можна відформатувати текст, щоб він відповідав очікуваному. Існує безліч способів виконання цього завдання, і найпростіше робити це безпосередньо у каркасі самого сайту засобами мови розмітки. Варто один раз розібратися, яким чином змінюється розмір шрифту у html, і у подальшому це вже не становитиме жодних труднощів.

У цьому матеріалі ми детально розповімо про те, яким чином виконується форматування шрифтів в html-документах.

Загальні принципи редагування тексту на веб-сторінках

Для початку потрібно розібратися, які можливості для форматування тексту дає нам html. Існує три основні характеристики шрифту — це гарнітура (характеристика, що визначає зовнішній вигляд букв і знаків), колір і розмір. Читабельність будь-якого документа залежить від того, наскільки грамотно поєднуються дані характеристики.

Характеристики тексту в html-розмітки змінюються за допомогою тегів і атрибутів. Тег — це основна складова мови, його головна логічна одиниця, а атрибут служить для того, щоб задати конкретне значення для кожного елемента сторінки, зазначеного тегом.

Також необхідно пам’ятати про те, що відображення тексту може відрізнятися при використанні різних браузерів, тому перш, ніж завершити роботу над сайтом, необхідно переконатися в коректності відображення інформації у всіх основних браузерах. Наприклад, розмір шрифту в html при використанні старих версій Internet Explorer може відрізнятися в порівнянні з новими версіями.

Тег <span>

Цей тег має більш широким набором можливостей і характеристик, ніж <font>. Він використовується, як правило, у зв’язці з CSS для редагування і стилізації певних частин документа.

Для цього тега значення задаються за допомогою атрибуту style. Ось так це виглядає в коді:

<span style=”font-size: 12pt;”>Тут розташовується текст</span>

Як можна помітити, тут використовується введення CSS-коду (font-size), а розмір задається за допомогою пунктів (pt, point). За стандартне значення приймається розмір в 12pt, який можна змінювати, збільшуючи або зменшуючи на ціле число.

Зміни розміру шрифту при форматування заголовків

Часто потрібно зменшити або збільшити розмір шрифту в html редагування заголовків. В даному випадку стоїть завдання не тільки змінити розмір, але і логічно виділити певну частину тексту й призначити її як головної для текстового блоку.

У такому разі доцільно користуватися тегами <h1> – <h6>. Тег <h1> заголовок першого рівня. У браузері він буде відображатися найбільш великим, а від теги <h2> <h6> використовуються для виділення підзаголовків.

Приклад коду:

<h1>Заголовок першого рівня</h1>

Рекомендується завжди використовувати для оформлення заголовків саме ці теги, оскільки це оптимізує код і є синтаксично більш правильним, а також надає єдиний стиль всього документу.

Специфічні параметри для даного тега задаються за допомогою CSS — таким чином можна задати конкретне значення розміру тексту, його колір і гарнітуру шрифту.