Підручник з розміру шрифту CSS - Як змінити розмір тексту в HTML

Використовуйте font-sizeвластивість CSS, щоб визначити розмір тексту.

.container { font-size: 33px; } 

Ця властивість приймає кілька типів значень:

  • Ключові слова (ключові слова абсолютного та відносного розміру),
  • Довжина (наприклад, пікселі (px) та одиниці em), та
  • Відсотки.
.container { font-size: xx-large; } 

Питання в тому: який тип цінності слід вибрати і чому?

Саме цим питанням займається ця стаття. Він покаже вам, як використовувати font-sizeвластивість та різницю між багатьма значеннями. Тож наступного разу, коли вам потрібно буде змінити розмір шрифту тексту, ви будете знати, до якого значення слід звернутися.

Значення ключових слів

Існує два типи значень ключових слів, які можна використовувати з розміром шрифту: absolute-sizeі relative-sizeключові слова. Почнемо з абсолютного.

Ключові слова абсолютного розміру

У наведеному нижче коді використовується ключове слово абсолютного розміру smallдля розміру тексту HTML.

.childElement { font-size: small; } 

На вибір є більше варіантів ключових слів абсолютного розміру:

  • хх-малий
  • х-малий
  • маленький
  • середній
  • великий
  • х-великий
  • xx-великий
  • ххх-великий

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

Ключові слова відносного розміру

Ключові слова відносного розміру - ще один варіант розгляду ключових слів. Ви можете вибрати з двох: smallerі larger.

.parentElement { font-size: smaller; } 

Розмір шрифту елемента з ключовим словом відносного розміру є відносним - більшим або меншим - до розміру шрифту батьків.

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

У цьому прикладі ключове слово відносного розміру smallerзастосовується до дочірнього елемента, а значення абсолютного розміру largeзастосовується до батьківського елемента.

Значення довжини

font-sizeприймає кілька різних значень довжини. Ми дослідимо три з них: пікселі (px) та одиниці em та rem. Незважаючи на ваш вибір, значення довжини, яке ви використовуєте, має бути позитивним.

.parentElement { font-size: 60px; } 

Пікселі

Пікселі - це абсолютна одиниця довжини. Це означає, що на них не впливають інші елементи, такі як батьківський елемент, або розмір вікна.

Як результат, пікселі точні: ви визначаєте точну кількість пікселів, яка вам потрібна для елемента, і це, як правило, ви отримуєте. Однак між браузерами можуть бути незначні відмінності.

Зверніть увагу, що дочірні елементи використовують pixelsта мають однаковий розмір шрифту у зразку коду вище.

ЕМ

Хоча ви можете вважати пікселі фіксованими, вважайте значення em змінними.

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

Однак, скажімо, ви не встановили розмір шрифту для батьківського елемента. Ви також не встановили такого в іншому місці вище в DOM. У цьому випадку значення em обчислюється з використанням браузера за замовчуванням (часто 16 пікселів).

Зробимо цю ідею конкретною.

Скажімо, для батьківського елемента встановлено значення 30px, а для дочірнього елемента - 2em. Тоді розмір шрифта дочірнього елемента становить 60 пікселів (2 х 30 пікселів = 60 пікселів). Ви можете побачити цей сценарій у коді нижче.

Значення em можуть бути проблематичними через їх складний ефект, що продемонстровано в наступному прикладі.

Коли у вас є кілька елементів, які використовують значення em, вкладені один в одного, значення розміру шрифту складаються: вони стають все більшими та більшими. Це складний ефект у дії.

REM

Введіть значення rem, які були створені для вирішення проблеми складання ems.

Нагадаємо, що значення em відносно батьківського елемента. На відміну від цього, значення rem відносно розміру шрифту кореневого (html) елемента.  

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

У цьому прикладі використовується font-sizeвластивість із значенням rem.

Ось ключовий момент із наведеного прикладу: розмір шрифту батьківського елемента не впливає на розмір шрифту дочірніх елементів.

Відсотки

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

Елемент із відсотком посилається на батьківський елемент для визначення розміру шрифту. Значення відсотків має бути додатним.

Ось приклад.

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

Я пишу про те, як навчитися програмувати, та про найкращі способи це зробити на amymhaddad.com. Ятакожпишутвіт про програмування, навчання та продуктивність: @amymhaddad.