font-sizeВластивість визначає розмір або висоту шрифту. font-sizeвпливає не тільки на шрифт, до якого він застосовується, але також використовується для обчислення значень одиниць довжини em, rem та ex.
p ( font-size: 20px; )font-sizeможе приймати як значення ключові слова, одиниці довжини або відсотки. Важливо, однак, зазначити, що коли воно оголошується частиною fontскороченого властивості, font-sizeце обов’язкове значення. Якщо він не включений у скорочення, весь рядок ігнорується.
Значення довжини (наприклад, px, em, rem, ex тощо), до яких застосовуються, не font-sizeможуть бути від’ємними.
Абсолютні ключові слова та значення
.element ( font-size: small; )Він приймає такі абсолютні значення ключових слів:
xx-smallx-smallsmallmediumlargex-largexx-large
Ці абсолютні значення зіставляються з певними розмірами шрифтів, як обчислює браузер. Але ви також можете використовувати два значення ключових слів, які відносно розміру шрифту батьківського елемента.
Інші абсолютні значення включають mm(міліметри), cm(сантиметри), in(дюйми), pt(точки) та pc(picas). Один бал дорівнює 1/72 дюйма, тоді як один піка дорівнює 12 балам - ці значення зазвичай використовуються для друкованих документів.
Відносні ключові слова
.element ( font-size: larger; )largersmaller
Наприклад, якщо батьківський елемент має розмір шрифту small, дочірній елемент із визначеним відносним розміром largerзробить розмір шрифту рівним mediumдля дочірнього елемента.
Значення відсотків
.element ( font-size: 110%; )Значення відсотків, такі як встановлення розміру шрифту 110%, також відносяться до розміру шрифту батьківського елемента, як показано в демонстраційній демонстрації нижче:
Дивіться Pen qdbELL від CSS-Tricks (@ css-tricks) на CodePen.
Ем одиниця
.element ( font-size: 2em; )Одиниця em - це відносна одиниця на основі обчисленого значення розміру шрифту батьківського елемента. Це означає, що дочірні елементи завжди залежать від батьків, щоб встановити розмір шрифту. Наприклад:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )У наведеному вище прикладі абзац матиме розмір шрифту 16 пікселів, оскільки 1 х 16 = 16 пікселів, тоді як заголовок буде 32 пікселів, оскільки 2 х 16 = 32 пікселів. Масштабування має багато переваг залежно від розміру шрифту батьківського елемента, а саме ми можемо обернути елементи всередині контейнера і знати, що всі дочірні елементи завжди будуть відносно один одного:
Дивіться Перо, що з’ясовує, як працює блок em за допомогою CSS-Tricks (@ css-tricks) на CodePen.
Блок rem
Однак у випадку одиниць rem розмір шрифту залежить від значення кореневого елемента (або htmlелемента).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )У наведеному вище прикладі одиниця rem дорівнює 16px (оскільки вона успадковується від htmlелемента / root), і, таким чином, розмір шрифту для всіх елементів абзацу буде обчислений до 24px (1,5 x 16 = 24). На відміну від одиниць em, абзац ігноруватиме стиль усіх своїх батьків, окрім кореня.
Цей пристрій підтримується такими браузерами:
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | Працює | Працює | Працює | 10+ | Працює | Працює |
Колишня одиниця
.element ( font-size: 20ex; )Для колишніх одиниць 1ex буде дорівнює обчисленій висоті малої літери x кореневого елемента. Отже, у прикладі нижче для htmlелемента встановлено значення, 20pxа всі інші розміри шрифту визначаються висотою x цього конкретного шрифту.
Дивіться Перо, що з’ясовує, як працює попередній блок за допомогою CSS-Tricks (@ css-tricks) на CodePen.
Поекспериментуйте з демонстраційною версією над моєю заміною font-familyна htmlелемент, щоб побачити, як змінюються інші розміри шрифту.
Оглядові одиниці
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Одиниці вікна перегляду , такі як vwі vh, встановлюють розмір шрифту елемента щодо розмірів області перегляду:
- 1vw = 1% ширини області перегляду
- 1vh = 1% висоти області перегляду
Отже, якщо взяти наступний приклад:
.element ( font-size: 100vh; )Тоді це стверджуватиме, що розмір шрифту елемента завжди повинен становити 100% висоти області перегляду у будь-який час (50vh буде 50%, 15vh буде 15% тощо). У демо-версії нижче спробуйте змінити розмір висоти прикладу, щоб спостерігати за розтягуванням типу:
Дивіться тип розміру пера з одиницями vh від CSS-Tricks (@ css-tricks) на CodePen.
vw одиниці відрізняються тим, що він встановлює висоту буквених форм на ширину області перегляду, тому в демонстраційній демонстрації нижче вам потрібно буде змінити розмір вікна браузера горизонтально, щоб побачити ці зміни:
Див. Тип розміру ручки з одиницями vw від CSS-Tricks (@ css-tricks) на CodePen.
Ці блоки підтримуються такими браузерами:
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4,4+ | 7.1+ |
Важливо зазначити, що існують ще дві одиниці області перегляду: vminі vmax. Перший знайде значення vhі vwі встановить розмір шрифту як найменший з двох, тоді як vmaxрозмір шрифту встановить як найбільший із цих двох значень.
Одиниця ch
.element ( font-size: 24ch; )chБлок аналогічний exблоку в тому , що він буде встановити розмір шрифту елемента по відношенню до ширини 0 (нуль) гліфа шрифту:
Див. Тип розміру пера з одиницями ch від CSS-Tricks (@ css-tricks) на CodePen.
Цей пристрій підтримується:
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Працює | 10+ | Працює | 9+ | Працює | Працює |