Визначення розмірів шрифтів у CSS, CSS

У цій статті ми розглянемо різні способи, за допомогою яких можна встановити розмір шрифту HTML .

Огляд одиниць виміру

Абсолютні одиниці є фіксованими і належать до будь-яких фізичних одиниць виміру. Після того як вони були задані, розмір не змінюється.

Відносні одиниці немає фактичного значення. Їх розмір визначається щодо батьківського елемента. Це означає, що розмір шрифту можна змінити в HTML шляхом зміни розмірів зв'язаного елемента.

Ось короткий огляд деяких одиниць виміру:

виміру

Яка між ними різниця?

Різницю між цими одиницями вимірювання важко зрозуміти теоретично, тому краще продемонструвати її на конкретних прикладах збільшення розміру шрифту HTML .

Приклад 1 — Налаштування за замовчуванням

У HTML-документі , де ви ще не встановлювали жодних розмірів шрифтів, існують стандартні налаштування. У більшості браузерів розмір стандартного шрифту для розділів html і body — 100%. Що відповідає такому:

100% = 1em = 1rem = 16px = 12pt

Це означає, що, якщо ви встановите розмір шрифту для одного блоку в 100%, а для іншого - 16px, на екрані вони будуть виводитися з тим самим розміром шрифту:

розмір

Приклад 2 - Абсолютні та відносні одиниці вимірювання

Різницю між абсолютними та відносними одиницями виміру простіше зрозуміти на прикладі, коли ми хочемо розмір шрифту HTML задати для конкретного елемента. Якщо ми поставимо html < font-size: 200% >, це вплине тільки на блоки з розміром шрифту, заданим у відносних одиницях:

розмір

Приклад 3 - rem та em (і %)

Одиниці виміру em (і %) працюють шляхомобчислення поточного розміру шрифту залежно від розміру батьківського шрифту.

Оскільки р є дочірнім елементом body, який у свою чергу є дочірнім html — параграфи, font-size яких задані за допомогою em і відсотків, матимуть два різні розміри шрифту HTML:

шрифтів

Вирішенням цієї проблеми є rem. Він розраховується лише з урахуванням розміру шрифту елемента html , а чи не батьківського елемента.

Використання rem дозволяє зберегти масштабованість em без впливу ієрархії елементів.

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

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

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

Тому моє рішення полягає у використанні в html коді розміру шрифту rem (і пікселів як запасний варіант):

Це дозволяє змінювати розміри шрифтів за допомогою наступного коду:

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

Дана публікація є перекладом статті «CSS Font Sizing», підготовленої дружньою командою проекту Інтернет-технології.