Встановлюємо розмір шрифту за допомогою HTML та CSS
Розмір шрифту на сайті можна встановити як за допомогою HTML, так і за допомогою CSS. Розглянемо обидва варіанти.
Завдання розміру шрифту за допомогою HTML
Розмір шрифту на сторінці можна визначити за допомогою тегаfont HTML. У статті Колір шрифту HTML ми вже розглядали тегfont та його атрибути. Одним із атрибутів цього тега єsize, який дозволяє встановити розмір шрифту. Застосовується він так:
Size може приймати значення від 1 до 7 (за замовчуванням дорівнює 3, що відповідає 13,5 пунктів для шрифту Times New Roman). Інший варіант завдання атрибуту - "+1" або "-1". Це означає, що розмір буде змінено щодо базового на 1 пункт більше або менше відповідно.
Наведений спосіб досить простий у використанні та незамінний при необхідності зміни розміру шрифту невеликого шматка тексту. В інших випадках рекомендується визначати стиль тексту за допомогою CSS.
Встановлюємо розмір шрифту за допомогою CSS
У CSS для зміни розміру шрифту застосовується властивістьfont-size, яка застосовується наступним чином:
У наведеному прикладі розмір шрифту встановлюється у пікселях. Але існують інші способи завдання розміру:
- large, small, medium - задають абсолютний розмір (маленький, середній, великий). Також можуть застосовуватися значення екстра-маленький (x-small, xx-small), екстра-великий (x-large, xx-large).
- larger, smaller - задають відносний розмір (менше або більше щодо батьківського елемента).
- 100% - задається відносний розмір (у відсотках щодо батьківського). Наприклад: Це означає, що розмір тегаH1 становитиме 180% від базового розміру шрифту.
- Інші варіанти завдання відносного розміру:
- 5ex - означає, що розмір становитиме 5 висот літериx від базового шрифту;
- 14pt - 14 пунктів;
- 22px - 22 пікселі;
- 1vw - 1% від ширини вікна браузера;
- 1vh - 1% від висоти вікна браузера;