CSS Font-size
Добавить в избранное
Свойство font-size в CSS используется для указания высоты и размера шрифта. Это влияет на размер текста элемента. Его значение по умолчанию среднее и может быть применено к каждому элементу. Значения этого свойства включают xx-small, small, x-small и т.д.
Размер шрифта может быть относительным или абсолютным.
Абсолютный размер
Используется для установки текста определенного размера. Используя absolute-size, невозможно изменить размер текста во всех браузерах. Это выгодно, когда мы знаем физический размер вывода.
Относительный размер
Он используется для установки размера текста относительно соседних элементов. С относительным размером можно изменить размер текста в браузерах.
ПРИМЕЧАНИЕ.
Если мы не определяем размер шрифта, то для обычного текста, такого как абзацы, размер по умолчанию равен 16px, что равно 1em.
Размер шрифта в пикселях
Когда мы устанавливаем размер текста в пикселях, это дает нам полный контроль над размером текста.
Пример
<html>
<head>
<title>Document</title>
<style>
#first {
font-size: 40px;
}
#second {
font-size: 20px;
}
</style>
</head>
<body>
<p id="first">Это абзац размером 40 пикселей.</p>
<p id="second">Это еще один абзац размером 20 пикселей.</p>
</body>
</html>
Размер шрифта с em
Используется для изменения размера текста. Большинство разработчиков предпочитают em вместо пикселей . Он рекомендован консорциумом всемирной паутины (W3C). Как указано выше, размер текста по умолчанию в браузерах составляет 16 пикселей. Итак, мы можем сказать, что размер 1em по умолчанию равен 16px.
Формула для вычисления размера от пикселей до em: em = пикселей/16.
Пример
<html>
<head>
<title>Document</title>
<style>
#first {
font-size: 2.5em; /* 40px/16=2.5em */
}
#second {
font-size: 1.875em; /* 30px/116=1.875em */
}
#third {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p id='first'>Первый абзац.</p>
<p id='second'>Второй абзац</p>
<p id='third'>Третий абзац.</p>
</body>
</html>
Адаптивный размер шрифта
Мы можем установить размер текста, используя единицу vw , которая означает « ширину области просмотра ». Область просмотра — это размер окна браузера.
1vw = 1% ширины области просмотра.
Если ширина окна просмотра 50 см, то 1vw равно 0,5 см.
пример
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="font-size: 5vw;">Первый абзац шириной 5vw.</p>
<p style="font-size: 10vw;">Второй абзац шириной 10vw.</p>
</body>
</html>