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>

Результат

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

Специфікація
CSS Fonts Module Level 4 (CSS Fonts 4) # font-size-prop

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

	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

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.