CSS Розмір шрифту
Font Size - Розмір шрифту
Властивість font-size визначає розмір тексту.
Можливість керувати розміром тексту важлива в веб-дизайні. Однак не варто використовувати налаштування розміру шрифту, щоб параграфи вигляділи як заголовки, а заголовки - як параграфи.
Завжди використовуйте правильні HTML теги, наприклад <h1> - <h6> для заголовків та <p> для параграфів.
Значення font-size може бути абсолютним або відносним.
Абсолютний розмір:
- Встановлює текст вказаного розміру
- Не дозволяє користувачу змінювати розмір тексту в усіх браузерах (погано через доступність)
- Абсолютний розмір має користь, коли відомий фізичний розмір виведення
Відносний розмір:
- Встановлює розмір відносно оточуючих елементів
- Дозволяє користувачу змінювати розмір тексту в браузерах
Примітка: Якщо ви не вкажете розмір шрифту, розмір за замовчуванням для нормального тексту, наприклад параграфів, буде 16px (16px=1em) - загальноприйнятий стандарт для вебсайтів.
Встановити розмір шрифту в пікселях
Встановлення розміру текста в пікселях дає вам повний контроль над розміром тексту:
Порада: Якщо ви використовуєте пікселі, ви все одно можете використовувати інструмент масштабування, щоб змінити розмір всієї сторінки.
Встановити розмір шрифту за допомогою Em
Щоб користувачі могли змінювати розмір тексту (в меню браузера), багато веброзробників використовують em замість пікселів.
1em дорівнює поточному розміру шрифта. Розмір текста за замовчуванням в браузерах складає 16 пікселів. Таким чином, розмір 1em за замовчуванням складає 16 пікселів.
Розмір можна розрахувати від пікселів до em за цією формулою:pixels/16=em.
Примітка. Також ви можете скористатись конвертером з пікселів в одиниці em і навпаки на нашому сайті за посиланням: Конвертер Px/Em.
Приклад
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Спробуйте самі »
В наведеному вище прикладі розмір тексту в em такий самий, як в попередньому прикладі в пікселях. Однак за допомогою розміру em можна налаштувати розмір тексту в усіх браузерах.
На жаль, проблема зі старими версіями Internet Explorer все ще існує. При збільшенні текст стає більшим, ніж повинен, і меньшим, ніж повинен, при зменшенні.
Використовуйте комбінацію процентів та Em
Рішення, яке працює в усіх браузерах, - встановити розмір шрифту за замовчуванням в процентах для елемента <body>:
Приклад
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Спробуйте самі »
Тепер код працює відмінно! Він показує однаковий розмір тексту в усіх браузерах і дозволяє всім браузерам збільшувати або змінювати розмір тексту!
Адаптивний розмір шрифту
Розмір тексту можна встановити за допомогою одиниці vw, що означає "viewport width" (ширина області перегляду).
Таким чином, розмір тексту буде відповідати розміру вікна браузера:
Hello World
Змініть розмір вікна браузера, щоб побачити, як масштабується розмір шрифту.
Область перегляду (viewport) - це розмір вікна браузера. 1vw = 1% ширини області перегляду. Якщо ширина області перегляду 50 см, 1vw складає 0,5 см.
