font-size

Властивість CSS font-size (розмір шрифту) задає розмір шрифту. Зміна розміру шрифту також змінює розміри одиниць вимірювання <length>, залежних від розміру шрифту, наприклад, em, ex, і так далі.

Спробуйте його в дії

Синтаксис

/* Значення <absolute-size> */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* Значення <relative-size> */
font-size: smaller;
font-size: larger;

/* Значення <length> */
font-size: 12px;
font-size: 0.8em;

/* Значення <percentage> */
font-size: 80%;

/* математичне значення */
font-size: math;

/* Глобальні значення */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

Значення

xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

Ключові слова абсолютного розміру, засновані на усталеному розмірі шрифту користувача (котрий має значення medium).

larger, smaller

Ключові слова відносного розміру. Шрифт буде більшим чи меншим відносно розміру шрифту батьківського елемента, приблизно у такому ж співвідношенні, в якому різняться сусідні ключові слова абсолютного розміру, згадані вище.

<length>

Додатне значення <length>. Для більшості залежних від шрифту одиниць вимірювання (наприклад, для em та ex) розмір шрифту відносний щодо розміру шрифту батьківського елемента.

Для залежних від шрифту одиниць вимірювання, що залежать від кореневого елемента (наприклад, для rem) розмір шрифту буде відносним щодо розміру шрифту, застосованого до елемента <html> (кореневого елемента).

<percentage>

Додатне значення <percentage>, відносне щодо розміру шрифту батьківського елемента.

[!NOTE] Для якнайкращої доступності в загальному випадку найкраще використовувати значення, що відносні щодо усталеного розміру шрифту користувача.

math

При визначенні обчисленого значення властивості font-size для математичних елементів відносно font-size батьківського елемента-контейнера застосовуються правила масштабування. Більше про це – читайте про властивість math-depth.

Опис

Є декілька способів вказати розмір шрифту, включно із ключовими словами та числовими значеннями у пікселях чи емах. Слід обирати доречний метод на основі потреб окремої вебсторінки.

Ключові слова

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

Пікселі

Вказування розміру шрифту у піксельних значеннях (px) є доречним у тих випадках, коли потрібна піксельна точність. Піксельне значення є статичним. Це незалежний як від операційних систем, так від браузерів спосіб буквально сказати браузерам зображати літери рівно з такою висотою в пікселях, як вказано. Результати можуть дещо відрізнятись на різних браузерах, оскільки вони можуть використовувати різні алгоритми для досягнення подібних наслідків.

Налаштування розмірів шрифтів також може діяти у сполученні. Наприклад, якщо на батьківському елементі задано 16px, а на дочірньому – larger, то дочірній елемент матиме шрифт, більший за шрифт батьківського елемента.

[!NOTE] Визначення розмірів шрифтів у px не відповідає принципам доступності, тому що користувач не може змінити розмір шрифту в деяких браузерах. Наприклад, користувачі з обмеженим зором можуть забажати задати розмір шрифту набагато більший за обраний вебдизайнером. Слід уникати їх використання для розмірів шрифтів, якщо поставлена мета створювати інклюзивний вебдизайн.

Еми

Використання значення em створює динамічний (обчислений) розмір шрифту (історично одиниця вимірювання em походить від ширини літери "M" в обраній гарнітурі.). Числове значення діє як множник властивості font-size елемента, на котрому застосоване. Погляньмо на наступний приклад:

p {
  font-size: 2em;
}

У цьому випадку розмір шрифту елементів <p> буде удвічі більшим за обчислену font-size, успадковану цими елементами. Як наслідок, font-size зі значенням 1em еквівалентний обчисленій font-size елемента, на котрому це застосовано.

Якщо font-size не була вказана на жодному з предків елементів <p>, то 1em дорівнюватиме усталеній font-size браузера, що зазвичай рівно 16px. Отже, усталено 1em еквівалентно 16px, а 2em еквівалентно 32px. Якщо встановити font-size зі значенням 20px на елементі <body>, то 1em на елементах <p> натомість буде еквівалентно 20px, а 2em буде еквівалентно 40px.

Аби обчислити для будь-якого піксельного значення em-еквівалент, можна застосувати наступну формулу:

em = бажане піксельне значення елемента / розмір шрифту батьківського елемента у пікселях

Наприклад, font-size елемента <body> задано 16px. Якщо бажаний розмір шрифту – 12px, то слід вказати 0.75em (бо 12/16 = 0.75). Подібно до цього, якщо бажаний розмір шрифту – 10px, то слід вказати 0.625em (10/16 = 0.625); для 22px – слід вказати 1.375em (22/16).

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

Іще один важливий факт, котрий слід мати на увазі: значення в емах комбінуються:

html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
<div>
  <span>Зовнішній <span>внутрішній</span> зовнішній</span>
</div>

Результат:

Виходячи із того, що усталене значення font-size в браузері – 16px, слова "зовнішній" будуть зображені із розміром 25.6px, а слово "внутрішній" – 40.96px. Так виходить, тому що font-size внутрішнього <span> – 1.6em, що є відносним значенням щодо батьківської font-size, котра і собі відносна щодо своєї батьківської font-size. Таку поведінку часто називають комбінуванням.

Реми

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

Код CSS нижче майже ідентичний до попереднього прикладу. Єдиний виняток – одиниця вимірювання замінена на rem.

html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

Тоді цей CSS застосовується до такого ж HTML, котрий має наступний вигляд:

<span>Зовнішній <span>внутрішній</span> зовнішній</span>

У цьому прикладі слова "зовнішній внутрішній зовнішній" – 25.6px (виходячи із того, що font-size браузера зберігає усталене значення 16px).

Ex

Подібно до використання одиниці вимірювання em, font-size елемента, вказана із використанням одиниці вимірювання ex, є обчисленою, інакше кажучи – динамічною. Це працює у такий само спосіб, за винятком того, що коли властивість font-size встановлена із використанням одиниць ex, то font-size дорівнює висоті x першого доступного шрифту на сторінці. Числове значення обчислюється шляхом множення успадкованого і власного значень font-size відповідно.

Дивіться Чернетку редактора W3C для більш детального опису таких залежних від шрифту одиниць вимірювання довжини, як ex.

Формальне визначення

Початкове значенняmedium
Успадковуєтьсятак
Обчислене значенняas specified, but with relative lengths converted into absolute lengths

Формальний синтаксис

<absolute-size> | <relative-size> | <length-percentage>

де
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large
<relative-size> = larger | smaller
<length-percentage> = <length> | <percentage>

Приклади

Встановлення розмірів шрифтів

CSS

.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML

<h1 class="small">Маленький H1</h1>
<h1 class="larger">Більший H1</h1>
<h1 class="point">H1 – 24 типографські пункти</h1>
<h1 class="percent">H1 – 200%</h1>

Результат

Специфікації

Сумісність з браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
font-size
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 5.5
Opera Full support 7
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
rem values
Chrome Full support 31
Edge Full support 12
Firefox Full support 31
footnote
Internet Explorer Full support 11
Opera Full support 28
Safari Full support 7
WebView Android Full support 4
Chrome Android Full support 42
Firefox for Android Full support 31
Opera Android Full support 28
Safari on iOS Full support 7
Samsung Internet Full support 4.0
xxx-large keyword
Chrome Full support 79
Edge Full support 79
Firefox Full support 70
Internet Explorer No support Ні
Opera No support Ні
Safari No support Ні
WebView Android Full support 79
Chrome Android Full support 79
Firefox for Android No support Ні
Opera Android No support Ні
Safari on iOS No support Ні
Samsung Internet Full support 12.0

Дивіться також