Font-size в css em, пікселі, пункти і відсотки

Один з найбільш заплутаних моментів в CSS це застосування властивості font-size для масштабування тексту. У CSS ви маєте чотири основні одиниці виміру, за допомогою яких ви можете регулювати розмір тексту. Яка з цих чотирьох одиниць найкращим чином підходить для інтернету? Це питання породив цілий шквал міркувань і суперечок. Остаточно відповісти на це питання вкрай важко, тому що саме питання не з простих.

Знайомство з одиницями вимірювання CSS

Отже, в чому відмінності?

Різницю між одиницями вимірами найпростіше зрозуміти на прикладах. Загалом, 1em = 12pt = 16px = 100%. Але що буде, якщо ми збільшимо базовий розмір шрифту, наприклад, у тега body виставимо font-size: 120%.

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

Em vs. відсотки

Ми з'ясували, що одиниці пікселі і пункти не найкраще рішення для інтернету, отже, ми залишилися з відсотками і em. У теорії і em і пікселі ідентичні, але на практиці, вони мають кілька невеликих відмінностей, які необхідно враховувати.

Наприклад, з прикладу вище, ми використовуємо відсотки для базового розміру шрифту (тег body). Якщо ви змінити базову одиницю виміру основного шрифту (відсотки) на em (тобто body ), Ви, можливо, не відчуєте різницю. Давайте подивимося, що станеться, коли у тега body розмір шрифту дорівнює 1em. і користувач вирішив змінити розмір шрифту - опція 'Text Size' в настройках браузера (це можливо на деяких браузерах, наприклад, IE).

Коли в браузері розмір тексту встановлений на 'medium', ви не помітите різницю між em і відсотками. Однак, якщо ви поміняєте настройки, різниця стане помітною. Наприклад, при 'Smallest', em істотно менше відсотків, а коли 'Largest', все навпаки, em стають більше відсотків. Хоча багато хто може стверджувати, що em масштабируются так як потрібно, на практиці em масштабується занадто різко, а при невеликому розмірі стає нерозбірливим на деяких екранах.

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